React の フレームワーク、Next.js に入門！
はじめに
Next.js は本番環境のための React フレームワークで主に以下のような特徴があります。
- 画像最適化
- 国際化ルーティング
- Next.js アナリティクス
- ゼロコンフィグ
- ハイブリッド SSG・SSR
- ISR（Incremental Static Regeneration）
- TypeScript サポート
- ファスト・リフレッシュ
- ファイルシステムルート
- API ルーティング
- ビルトイン CSS サポート
- コード分割とバンドリング
今回は、これらの特徴について、説明していきたいと思います。
特徴
画像最適化
バージョン 10.0.0 より対応できるようになっています。
閲覧しているブラウザによってリサイズしたり、WebPをサポートしているブラウザにはそれを配信したり、lazy load してくれたりします。
使い方
import Image from 'next/image'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}
export default Home
国際化ルーティング
バージョン 10.0.0 より対応できるようになっています。
ブラウザの設定されている言語によって特定のドメインへルーティングを行います。
使い方
// next.config.js
module.exports = {
i18n: {
// These are all the locales you want to support in
// your application
locales: ['en-US', 'fr', 'nl-NL'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en-US',
// This is a list of locale domains and the default locale they
// should handle (these are only required when setting up domain routing)
// Note: subdomains must be included in the domain value to be matched e.g. "fr.example.com".
domains: [
{
domain: 'example.com',
defaultLocale: 'en-US',
},
{
domain: 'example.nl',
defaultLocale: 'nl-NL',
},
{
domain: 'example.fr',
defaultLocale: 'fr',
// an optional http field can also be used to test
// locale domains locally with http instead of https
http: true,
},
],
},
}
Next.js アナリティクス
バージョン 10.0.0 より対応できるようになっています。
実際に使われるデバイスから情報を取得し、Web Vitals などのパフォーマンスを計測することができます。
ゼロコンフィグ
設定ファイルなどなしで Next.js を始めることができます。
使い方
$ yarn create next-app
$ yarn add next react react-dom
$ vim package.json
# scripts 部分を以下のように編集します
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
$ pages/index.js
# 以下のようにします
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
$ yarn dev
ハイブリッド SSG・SSR
getStaticProps
ビルドのタイミングでデータを取得し、props としてそのデータを使用します。
以下の場合に使用すると良いです。
- ユーザリクエストより前に行われるビルドのタイミングでページの描画が可能な場合
- ヘッドレス CMS からデータを取得する場合
- ユーザに依存しないデータをキャッシュする場合
getStaticPaths
特にダイナミックルーティングしているときにレンダリングを行います。
以下の場合に使用すると良いです。
- 静的なページ生成でかつダイナミックルーティングする場合
getServerSideProps
リクエストごとにデータを取得し、レンダリングを行います。
以下の場合に使用すると良いです。
- リクエストのタイミングでデータが必要な場合
ISR（Incremental Static Regeneration）
Next.js ではビルドした後にページを作成・更新を再ビルドなしにすることができます。
使用するには、getStaticProps の戻り値に revalidate を加えます。
この revalidate に設定した時間だけキャッシュを行い、キャッシュが切れるとバックグラウンドでデータを更新します。
TypeScript サポート
Next.js のアプリを作成する際に以下のようにすることで TypeScript をサポートしたコードを生成することができます。
$ yarn create next-app --typescript
ファスト・リフレッシュ
バージョン 9.4 より対応できるようになっていて、デフォルトで有効となっています。
ファスト・リフレッシュは、export しているコンポーネントのみに修正を加えた場合にそのコンポーネントのみ再レンダリングを行います。
export していないファイルに修正を加えた場合は、そのファイルを使用しているすべてのコンポーネントに更新が入ります。
ファイルシステムルート
Next.js では、pages ディレクトリ以下に配置したファイルを見て、ルーティングを行います。
以下のようなルーティングを行います。
- pages/index.js → /
- pages/blog/index.js → /blog
- pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
- pages/[username]/settings.js → /:username/settings (/foo/settings)
- pages/post/[...all].js → /post/* (/post/2020/id/title)
API ルーティング
pages/api ディレクトリ以下にファイルを配置することで API を定義することができます。
使い方
export default (req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify({name: 'John Doe'}));
};
ビルトイン CSS サポート
css ファイルを import することでスタイルを適用することが可能です。
使い方
import '../styles.css';
// この default export は、新たに作成した `pages/_app.js` で必要になります。
export default function MyApp({Component, pageProps}) {
return <Component {...pageProps} />;
}
コード分割とバンドリング
Next.js では自動でコード分割とバンドリングが行われます。
簡単な動かし方
以下の手順で簡単に構築できます。
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
$ cd nextjs-blog
$ npm run dev
ブラウザから http://localhost:3000 にアクセス
おわりに
Next.js がどういったものかがざっくりと分かったかと思います。
特にパフォーマンスの観点から SSR や SSG をうまく組み合わせてアプリケーションを作っていけるとより良い Web サイトが作っていけると思います。
次回は、この Next.js を使ってアプリケーション開発行っていけるところまで書いてみたいと思います。
お知らせ
Webサイト・ツール・LP作成のご依頼は、
こちらからお問い合わせいただけます。お気軽にご相談ください。
参考
Discussion