空雲リファレンス

Next.js(12系)によるReact+TypeScript入門 1

Next.js(12系)に関して

Next.jsの12系の目玉機能はビルド速度のさらなる高速化です。Babelの代わりにRustで作られたswcを使うことにより、速度向上を図っています。しかしBabelプラグインを使う場合にはswcが無効になってしまうので、全ての場合において恩恵が受けられるわけではありません。現在Next.jsのコミュニティでは、主要なBabelプラグインの機能をswcに移植する作業が進んでおり、例えばTypeScriptのDecorator機能などは、以前はBabelプラグインの設定が必要でしたが、今ではなんの記述もいらずにそのままswcを通して利用可能になっています。

使用する主なライブラリ・フレームワーク

Node.js

JavaScriptを主体とするフレームワークです。このNode.jsを利用することによって、様々なアプリケーションを開発することが出来ます。また、npmというパッケージ管理システムを用いることによって、先人の開発したライブラリやフレームワークを容易に自分のアプリケーションに組み込むことが可能です。

TypeScript

JavaScriptのスーパーセットとして型の概念が導入されたプログラミング言語です。基本的には実行前にJavaScriptに変換してから使用することになります。TypeScriptによる型の概念は強力で、単純なエラーチェックだけで無く、プログラミングエディタと連携した入力補完がサポートされます。それによって得られる開発の効率化は圧倒的です。

React.js

仮想DOMを用いたUI構築用のライブラリです。TypeScriptとの相性が良く、SPA(SinglePageApplication)を効率的に開発できます。

Next.js

Reactベースのフレームワークです。主にフロントエンド開発で用いられますが、バックエンドAPIを作成することも可能です。導入が容易で、React.js単体で開発環境を構築するよりもNext.jsから使用した方が、初期設定などの手間が削減できます。また、開発時に使用するホットリロード(プログラム修正後のリロード)が強力で、修正確認が圧倒的な速度で行えます。

基本用語解説

ページ切り替えの種類

SPA(Single Page Application)

Webページの更新をHTMLデータをまるごと再送することなく、部分的な書き換えで行う方式です。仮想的にページを切り替えたように見せかけるだけであり、データ送受信時にUIの操作の中断が最小限で済むので、ユーザーの体験が向上します。

MPA (Multi Page Application)

昔ながらの方式です。データの送受信時にHTMLデータをまるごと切り替えます。この動作によってデータの送受信が終わるまでUIが中断されます

ページレンダリングの種類

CSR (Client Side Rendering)

特に細工せずにReact.jsをフレームワーク無しで使用すると、この方式になります。Next.jsにこのモードはありませんが、細工することでそれに近い状態にすることは可能です。

JavaScriptを呼び出す最小限のHTMLだけ返して、後はクライアント側でUIを構築します。

SSR (Server Side Rendering)

Next.jsの標準動作です。初期ページのHTMLをサーバ側で作成し、それ以降の動作をクライアントで行います。Next.jsがサーバ上で稼働している必要があります。

リモートからデータをとってくるような構造が必要な場合、サーバとクライアントの差異があるので、特に認証の有無によって挙動が異なるようなページを作成する場合は辛みが増えていきます。

SG (Static Generation)

Next.jsのエクスポート機能を利用して、静的なページを作成しておくことで利用出来ます。この時点でページの生成は済んでいるため、エクスポートしたコンテンツを一般的なWebサーバに載せておけばNext.jsを必要とせずに動作させることが出来ます。

ビルド時のレンダリングに使用しているデータの更新が発生すると、再ビルドが必要となります。逆にビルド時にそういったデータを除外して、擬似的にCSRのような状態を作り、再ビルドの必要性をなくすという方法もあります。

ISR (Incremental Static Regeneration)

必要に応じてSSGを行い、結果をキャッシュする方式です。ビルドの時間を短縮できます。この機能を利用するにはNext.jsがサーバ上で稼働している必要があります。

環境構築

開発に必要なアプリケーション

Node.js

https://nodejs.org/ja/

基本的にはTLS版を入れておけば問題ありません。

Visual Studio Code(推奨)

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

TypeScriptの機能追加とともにVSCodeも更新されるのでおすすめしておきます。

Next.jsの環境構築

適当な場所にフォルダを作成しVSCodeで開いてください。

パッケージ管理ツールのインストール

npm -g i yarn

パッケージ管理はnpmだけでも良いのですが、yarnを使って解説している記事が多いので、最初に入れておきましょう。

開発に必要なパッケージ

yarn add next react react-dom yarn add -D typescript @types/node @types/react

-Dが付いていないものはビルド後の動作に必要なもので、付いているものはビルド時に必要になるものです。サーバーに

最初のプログラム

ファイルの作成

src/pages/index.tsx

const Page = () => <div>今日は世界!</div>; export default Page;

実行

yarn next

Next.jsを開発モードで起動します。 デフォルトではポート3000で待機状態になります。

確認

npmスクリプトのコマンドの作成

package.json

{ "scripts": { "dev": "next", "start": "next start", "build": "next buid", "export": "next export" }, "devDependencies": { … }, "dependencies": { … } }

以上のようにscriptsを設定しておくと、

  • 開発モードで起動 yarn dev
  • buildしたプログラムを起動 yarn start
  • プログラムのビルド yarn build
  • buildしたプログラムをSSG用に吐き出す yarn export

という形の短縮形で起動したり、VSCodeのnpmスクリプト欄からマウスクリックで実行できます。

tsconfig.jsonの設定変更

Next.jsを起動するとtsconfig.jsonが自動生成されます。その際に、変更を推奨する内容を紹介します。

初期設定

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] }

推奨変更内容

以下のように設定を変更します。これでTypeScriptの文法チェックが厳格になります。

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": true, // ここを変更する "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] }
Login