TIL 35. NextJSって何?

🔥 next.jsはサーバ側レンダリング

設定

mkdir 파일 이름
cd 파일 이름
yarn init -y (npm도 되지만 yarn이 더 빠르다!)
yarn add react react-dom next 

package.jsonファイルへ

“script”: {
	“dev”: “next”,
	“build”: “next build”,
	“start”: “next start”
}

次のスクリプトを追加

糸devをクリックすると、サーバーが開きます!

Next.jsの利点🌸

サーバ側レンダリングのデフォルト設定
-サーバー側レンダリングの利点
-検索エンジンの最適化
-初期ロードパフォーマンスの向上
- SEO ( Search Engine Optimization)

コード剥離(以下に説明する)

Webパッケージの環境に基づいて、ホットモジュール交換(HMR)

をサポートする.

Babel、Webpack設定カスタマイズ

をサポート

Node.

はjsなどのhttpサーバとともに実装可能

サーバ側リストア(SSR)のフレームワークを簡単に実装

👀 簡単な追加説明

従来,ほとんどがSSRによって操作されていたため,ページには複数のマルチページフォームが用いられていた.
しかし、スマートフォンの登場に伴い、従来のアプリケーションではモバイル機器の最適化が行われていなかったため、この問題を解決するためにreact、Angular、Vueなど複数のライブラリ、フレームワークが出現し、クライアントサーバのレンダリングが可能なSPA(Single Page Application)が出現した.

ページコンポーネントでは、ファイルがページになります。

ルーティングコンポーネントを必要としない組み込みルーティング!🥺

ファイル名を[key].jsに変更し、新しいタグで名前を付けます.それがルーティングです.

クラス関数を書き込むには、reactからインポートします。  こう書く

リンク構成部品

import Link from ‘next/link’; <Link>を使用する場合、react-routerはtoを使用しますが、hrefという点と、素子内部に文字列以外の素子または素子が必要です<Link><a>blahblah</a></Link>をこのように使うべきです.
cssをあげるときはinline-styleかclassNameにすればいいです.
コンポーネントを追加する場合は、コンポーネントにonclick propsを受信して実行する必要があります.
リンクにはhrefとasというpropsがあり、hrefはページのナビゲーションロールとして機能し、asはhrefのURLをより直感的にするロールです.
(直接アクセスも簡単)

Next.jsではhistory=>router!!

historyで使われているgobackは、ここではbackと書くだけでいいです.
history.「next/router」からpushではなくルータをインポートします.
Router.push( /brand=${props} );
このように使う

👍🏻 server.jsは「カスタムサーバ」を使用してルーティングマスクを行います。

リンクコンポーネントがasを使用する場合、実際のページがない場所で要求されます.したがって、asのURLにhrefが表示されるように、Custom Serverを直接作成し、リフレッシュまたは後退時にレンダリングできるように個別に処理する必要があります.
本来はpagesディレクトリに入れるべきですが、ここではcomponentsディレクトリに置く必要はなく、相対パスでロードすることもできます.

✏️ Query Parameter

クエリー・パラメータは/brand?sectorsType=brandです.
propsの{url.query.keyword}を読めばいいです.
直接住所に電話するとkeywordを確認できます.
pathname parameterは/brand/:idを使用します.ここではカスタムサーバAPIを使用する必要があります.
構造上/brand/13にこのような要求があればpage/brand/13.jsファイルをレンダリングしようとする

✅ getInitialProps

getInitialPropsメソッドは、サーバ側にあるかクライアント側にあるかを決定します.
通常のReactレンダリング方法は、まず()をレンダリングし、次にComponentDidMount()関数でデータをインポートしてから、もう一度!これはレンダリングの方法です.👀
逆に、NextはgetInitialProps()という関数を使用するので、まずデータをインポートし、次にレンダリングします.
これにより、SSRは1回のレンダリングで初期ロード速度を速めることができますが、ページ移動時にデータをロードする必要があるため、CSRより遅いです.

コード剥離

一般的に、SPAは初期レンダリング時にすべての構成部品を取り外してページを表示しますが、スケールが大きくなり容量が大きくなるにつれてロード速度が遅くなります.
Nextはこれらの問題を改善し,必要に応じてファイルをロードし,コード剥離を用いて複数のファイルを分離した.

static async getInitialProps ({req}) {
return req ? { from : ‘server’ } : { from : ‘client } }

return ( 
	<Layout>
		{ this.props.from } 에서 실행이 되었어요 
	</Layout>
 )

メソッドで返される値は、構成部品のpropsに渡されます。

パラメータがサーバ側のreqである場合、clientはundefinedを表示します。

static async getInitialProps ({req}) {
  const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return {
      users: response.data
    }
}

プリフェッチはリンク構成部品で行い、リンク構成部品をレンダリングするとき
プリフェッチ値が<Link prefetch href=‘…’>形式で渡されると、データがロードされ、ルーティングが開始される.