Next.js 学習 : 基本 (Create your first app)
Next.js の公式サイトでの学習。
from Create a Next.js App
create-next-app で Next.js アプリを作成
from Navigate Between Pages
Next.js では、pages ディレクトリの React コンポーネントがページになる
→ Next.js のページ機能
from Assets, Metadata, and CSS
Next.js には、組込みの CSS と Sass のサポートがある
Next.js で画像などの静的ファイルを配信するには public ディレクトリに配置する → Next.js での静的ファイル配信
画像の最適化 (例えば WebP 利用など) もデフォルトで実施
next/image モジュール
head 要素の変換には Head コンポーネントを利用する
外部スクリプトの読み込みには Script コンポーネントを利用できる
CSS
CSS Modules を利用できる
xxx.modules.css というファイル名
Sass のサポート : npm install -D sass でモジュールのインストールは必要
PostCSS ライブラリ (Tailwind CSS など) → Next.js の PostCSS
CSS-in-JS ライブラリ (styled-jsx、styled-components、emotion)
グローバルな CSS は pages/_app.js で読み込む必要
from Pre-rendering and Data Fetching
Pre-rendering の 2 種類
Static Generation : ビルド時に HTML を生成する pre-rendering 手法
Server-side Rendering : リクエスト時に HTML を生成する pre-rendering 手法
データを伴う Static Generation は、ページのコンポーネントのファイルで getStaticProps メソッドをエクスポートすることで実現
gray-matter ライブラリで、Markdown のヘッダにメタデータを付与した内容をパースできる
Next.js での polyfill
See : https://nextjs.org/docs/basic-features/supported-browsers-features
fetch
URL
Object.assign
Server-side Rendering のためには、getServerSideProps メソッドをエクスポートする
Client-Side Rendering には SWR
from Dynamic Routes
pages ディレクトリ配下の [xxx] というファイル名は動的ルーティング
Static Site Generation における動的ルーティング
getStaticPaths メソッドをエクスポートして、取りえる値をすべて返す
TBD