はじめに

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には全ページで共通させるファイルを読み込ませる、処理を実行させる、
共通のレイアウトを組み込んだりする。

参考記事
Next.js　チュートリアル
 【日本一わかりやすいNext.js入門】#1 講座の概要