Next.js
https://upload.wikimedia.org/wikipedia/commons/8/8e/Nextjs-logo.svg
公式のexample
Next.jsの公式サンプルは前回(2020年7月版)から34本増えて合計268本あります。新たに追加されたサンプルには(new)がついています。(2021/01/10)
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。
チュートリアルがわかりやすい
以下のメモはチュートリアルをやったときのやつ
成果
Reactを使ったことがある目線での第一印象
ルーティングが楽そう
react-routerなどを使わずに、ファイルシステムベースにできる
/pagesディレクトリがルートとして使われる
もろもろの設定を書かなくていい
Babel + Webpack
Code Splittingは自動的に行われる
Pre-render
TypeScript
など
レンダリングのタイミングを選べる
File system routing feature
ルーティングの仕組み
例
/pages/index.js -> /
/pages/posts/first-post.js/ -> /posts/first-post
React Componentをexportしたファイルを置けばいいのか
ある意味、生のPHPのような原点回帰っぽくもみえる
ただ、生のPHPみたく拡張子は表示されないし、React componentをexportしておけばいいだけなのが楽
Link Component
ページ遷移に用いるコンポーネント
code:js
import Link from 'next/link'
Client-Side Navigationを実現する
JavaScriptによってページを切り替える
静的ファイル
/publicに配置する
これはWebpackで環境構築するときに、publicなりbulidなり任意で設定していたやつ
/publicへのアクセスは、publicをルートとしてアクセスする
/public/favicon.ico
code:js
<link rel="icon" href="/favicon.ico" />
/pagesはJavaScriptのモジュール機能で管理するし、Linkのhrefで遷移先を書くから、こういう風に実現できるのか
たとえば
robots.txt
favicon.ico
css/
index.html
画像の要素には<img>ではなくImageを使う
code:js
import Image from 'next/image'
WebPなどの最新の形式で、リサイズ、最適化、提供などが可能になる
viewportが小さいデバイスに対して大きな画像を送らないで済む
便利すぎる
メタデータの更新はHeadを用いる
code:js
import Head from 'next/head'
CSSによるスタイリング
styled-jsxが用意されている
ReactコンポーネントのなかにCSSを記述する
CSSファイル名は.module.cssで終わるようにする
Layout Componentを作って、コンポーネントをラップする
クラス名は自動的に変換される
すべてのページに適用するグローバルCSSを追加する
pages/_app.jsという特殊なファイルを作成する
すべてのコンポーネントをラップする
レイアウトだけでなく、共通して実行させたい処理なども書ける
認証処理とか
ここで、global.cssを読み込みばOK
code:pages/_app.js
import '../styles/global.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Pre-rendering
サーバー側で事前にHTMLを生成する
Next.jsはデフォルトですべてのページでPre-renderingする
JavaScriptが無効化されていても、Pre-reinderingのおかげでHTMLが表示される
種類
Static Generation
next build した時点でHTMLが生成される
基本的にはこちらを使ったほうがいい
更新頻度が低いときに使う
例
ブログ記事
ECサイトとか
Server-side Rendering
ページリクエストの度にHTMLが生成される
更新頻度が高いときに使う
例
Client-Side Rendering
クライアントでHTMLが生成される
共存できる
チュートリアルでは、データベースやヘッドレスCMSからデータを取得することを前提に紹介されている Static Generation
ビルド時にHTMLをレンダリングする
データベースや外部APIからデータを取得してからビルドしたいときがある
getStaticPropsを用いる
pages以下のコンポーネントで使用できる
productoin環境ではビルド時に実行
development環境ではリクエストごとに実行
Server-side Rendering
getServerSideでデータを取得する
Client-side Rendering
SWRというHooksを使う
取得したデータをキャッシュできる
code:js
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetch)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
動的ルーティング
Dynamic Routing
ブログ記事とかユーザーページとか
ファイル名に[]を使って動的部分を表現する
pages/posts/[id].js
ルーティングがディレクトリ、ファイル名で完結することを意味している、便利
getStaticPathsを使って静的ファイルを生成する
返す値
code:js
return {
paths,
fallback: false // 事前ビルドしたパス以外にアクセスしたら404
}
pathsにはpages/post/[id].jsの[id]に入る値が格納される
paramsというキーが必要
code:js
[
{
params: {
id: 'ssg-ssr'
}
},
{
params: {
id: 'pre-rendering'
}
}
]
Linkコンポーネントのasが不要になった(要出典)
code:Js
<Link href="/posts/id" as={/posts/${id}}> Catch-all Routes
動的部分を入れ子にできる
pages/posts/[...id].js
/posts/a
/posts/a/b
/posts/a/b/c
API Routes
getStaticPathsやgetStaticPropsのなかでFetchしない
API Routesのコードは、clientのコードには含まれない
デプロイ
Vercel
Develop, Preview, Ship
DPS