はじめに
Next.jsはReactと何が違うのか、Next.jsの特徴、
公式チュートリアルで学んだことを自分用のメモとして簡単にまとめます。
ReactとNext.jsの大きな違い
ReactはCSR（Client Side Rendering）、SPA(Single Page Application)が特徴。
初期に必要なページをすべてロードするため読み込みが遅い。
ブラウザ側でhtmlのレンダリングを行う。ブラウザの負荷が大きい
Next.jsはSSR(Server Side Rendering )
サーバー側でレンダリングを行う。
サーバーのほうがスペックが高いため、レンダリングが早い。
以下の参考記事に詳しく記載されている
結局ReactとNext.jsのどちらで開発を進めればいいの？
Next.jsの利点
Next.jsを使うことで、ReactでしなければいけなかったWebPackとかBabelのめんどくさい設定を省ける
Code Splitingのような読み込むページ量の最適化設定が不要
Reactで必要だったパフォーマンス、SEOのためのPre-renderの設定が不要
レンダリングのタイミング(SGやSSR,CSR)を選択できる
サーバーサイドの実装(APIなど)もできる
プレレンダリング…事前にレンダリングしてhtmlを作成すること
Next.jsのチュートリアルで学んだこと
Navigate Between Pages
pageはpageディレクトリ内に配置する。
ファイル名がルート(経路となる)、つまりファイルへのパスがURLになる。
例
pages/index.js → /
pages/example/example-page.js → /example/example-page
ページ遷移にはLinkコンポーネントを用いる。
LinkコンポーネントはClient-Side Navigationを可能にする。
Client-Side NavigationはJavaScriptによってページを切り替える仕組み。
クライアント側で変更した状態を保ったままページ遷移することができる。
ユーザーが入力した情報を保持できるので開発者にとても便利な機能。
ページの再読み込みが発生しないので、ページ遷移がはやい。
Code Splitingで、Pre featchされるときLinkコンポーネントに紐づいたものも読み込まれる。
Assets, Metadata, and CSS
Assets
画像などの静的データは、トップのpublicディレクトリに配置する。
画像を用いるときはImageコンポーネントを用いる。
画像サイズの変更と最適化を自動でやってくれるので便利。
※静的アセットとは
アセットとは資産という意味。静的アセットで画像ファイルなどを表す。
Metadata
Next.jsではhtmlの<head>タグの変わりに<Head>コンポーネントを用いることによって、
pageごとにメタデータを設定できる。SEOに強くなる。
例 ページごとにtitleを設定する
Scriptコンポーネントを用いることで、Third-party JavaScriptを追加できる。
サードパーティ スクリプトの読み込みを簡易化できる。
メタデータとは…データの説明データ
CSS Styling
CSSを設定では以下の様々な方法をとれる。
- CSSモジュール
- css 、 .scss fileをインポートするSaas
- Tailwind CSSのようなPostCSS libraries
- styled-jsx, styled-components、emotionのようなCSS-in-JSライブラリ
-
CSS Modules
Reactのコンポーネントにcssファイルをインポートできる。
CSS ファイル名の末尾は .module.css.
cssモジュールにクラスを定義じて使用するファイルでインポートする。 -
Layout Component
最上位にcomponentディレクトリを作成。
その中にLayoutコンポーネント(すべてのページで共通のデザインを定義する)を作成する。
CSS モジュールの機能では、一意のクラス名が自動的に生成されるため、
同じファイル内でかぶってなければ、クラス名の衝突を心配する必要がない。
- Global Styles
すべてのページでロードしたいcssを定義する
グローバルなcssファイルをロードするには、
pageディレクトリに_app.jsを作成する。
Appコンポーネントはすべてのページに共通する最上位のコンポーネントであり、
グローバルcssはAppコンポーネントでのみインポートできる。
_app.jsには全ページで共通させるファイルを読み込ませる、処理を実行させる、
共通のレイアウトを組み込んだりする。