React の フレームワーク、Next.js に入門！

はじめに

Next.js は本番環境のための React フレームワークで主に以下のような特徴があります。

1. 画像最適化
2. 国際化ルーティング
3. Next.js アナリティクス
4. ゼロコンフィグ
5. ハイブリッド SSG・SSR
6. ISR（Incremental Static Regeneration）
7. TypeScript サポート
8. ファスト・リフレッシュ
9. ファイルシステムルート
10. API ルーティング
11. ビルトイン CSS サポート
12. コード分割とバンドリング

今回は、これらの特徴について、説明していきたいと思います。

特徴

画像最適化

https://nextjs.org/docs/basic-features/image-optimization

バージョン 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

国際化ルーティング

https://nextjs.org/docs/advanced-features/i18n-routing

バージョン 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 アナリティクス

https://vercel.com/docs/next.js/analytics

バージョン 10.0.0 より対応できるようになっています。

実際に使われるデバイスから情報を取得し、Web Vitals などのパフォーマンスを計測することができます。

ゼロコンフィグ

https://nextjs.org/docs/getting-started

設定ファイルなどなしで 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

https://nextjs.org/docs/basic-features/data-fetching

getStaticProps

ビルドのタイミングでデータを取得し、props としてそのデータを使用します。

以下の場合に使用すると良いです。

• ユーザリクエストより前に行われるビルドのタイミングでページの描画が可能な場合
• ヘッドレス CMS からデータを取得する場合
• ユーザに依存しないデータをキャッシュする場合

getStaticPaths

特にダイナミックルーティングしているときにレンダリングを行います。

以下の場合に使用すると良いです。

• 静的なページ生成でかつダイナミックルーティングする場合

getServerSideProps

リクエストごとにデータを取得し、レンダリングを行います。

以下の場合に使用すると良いです。

• リクエストのタイミングでデータが必要な場合

ISR（Incremental Static Regeneration）

https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

Next.js ではビルドした後にページを作成・更新を再ビルドなしにすることができます。

使用するには、getStaticProps の戻り値に revalidate を加えます。

この revalidate に設定した時間だけキャッシュを行い、キャッシュが切れるとバックグラウンドでデータを更新します。

TypeScript サポート

https://nextjs.org/docs/basic-features/typescript

Next.js のアプリを作成する際に以下のようにすることで TypeScript をサポートしたコードを生成することができます。

$ yarn create next-app --typescript

ファスト・リフレッシュ

https://nextjs.org/docs/basic-features/fast-refresh

バージョン 9.4 より対応できるようになっていて、デフォルトで有効となっています。

ファスト・リフレッシュは、export しているコンポーネントのみに修正を加えた場合にそのコンポーネントのみ再レンダリングを行います。

export していないファイルに修正を加えた場合は、そのファイルを使用しているすべてのコンポーネントに更新が入ります。

ファイルシステムルート

https://nextjs.org/docs/routing/introduction

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 ルーティング

https://nextjs.org/docs/api-routes/introduction

pages/api ディレクトリ以下にファイルを配置することで API を定義することができます。

使い方

export default (req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify({name: 'John Doe'}));
};

ビルトイン CSS サポート

https://nextjs.org/docs/basic-features/built-in-css-support

css ファイルを import することでスタイルを適用することが可能です。

使い方

import '../styles.css';

// この default export は、新たに作成した `pages/_app.js` で必要になります。
export default function MyApp({Component, pageProps}) {
    return <Component {...pageProps} />;
}

コード分割とバンドリング

https://nextjs.org/docs

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作成のご依頼は、

https://iteek.jp/contact/

こちらからお問い合わせいただけます。お気軽にご相談ください。

参考

https://nextjs.org/