モダンなReact Webアプリケーションフレームワーク「Next.js」とは？

Next.jsはReactのフレームワークです。ReactはFacebookが開発したJavaScriptのライブラリで、Webアプリケーションのフロントエンドを構築するために使われます。Next.jsはReactを使って、Webアプリケーションを作るためのWebアプリケーションフレームワークです。

Next.jsのWebサイト

Next.jsの開発元

Next.jsはVercel社が主に開発しています。Next.js自体はオープンソース・ソフトウェアですが、ホスティングサービスであるVercelに特化して提供されている部分が多々あります。

他のホスティングサービスであるNetlifyやAWS Amplifyでも利用できるようになっていますが、一部の機能が使えなかったり、Vercelに最適化されている部分もあります。

Next.jsの特徴

Next.jsはReactアプリケーションを本格的に利用したり、Webアプリケーションの中で活用する上で必要な機能が揃っています。以下のような特徴があります。

ルーティング

Next.jsでは、2種類のルーティング機能が用意されています。

Pages Router
App Router

Pages Routerは昔からあるもので、App RouterはNext.js 13から提供されています。Pages Routerは pages フォルダ以下にファイルを作成すると、そのファイル名でルーティングされる機能です。

App Routerはフォルダ + page.tsxでルーティングになります。また、[id] のような形でフォルダを作成し、動的なルーティングを定義できます。

レンダリング

Next.jsではブラウザによるレンダリングと、サーバー側でのレンダリングの2種類が用意されています。ユーザーごとによって異なるコンテンツの場合は、ブラウザによるレンダリングを使います。サーバー側は、誰でも同じコンテンツに対して適用されます。

さらにServer Componentsという機能によって、画面上の一部だけをサーバー側でレンダリングすることもできます。使いこなすことによって、レンダリングを高速化したり、ユーザー体験を向上できるでしょう。

データフェッチ

Next.jsのApp Routerでは、キャッシュ制御が標準のfetch APIとは異なる機能を前提としています。そのため、Next.jsによって拡張されたfetch APIを利用するのが望ましいとされています。

Next.jsではクライアントサイド、サーバーサイドを問わず動作しますので、データフェッチもセキュリティなどが異なります。そうした観点からも、Next.jsによって拡張されたfetch APIを利用するのが良いでしょう。

スタイル

Next.jsで提供されるスタイル（CSS）は以下の通りです。

グローバルCSS
CSSモジュール
Tailwind CSS
Sass
CSS-in-JS

最適化

Next.jsにはWebアプリケーションの最適化処理が幾つか用意されています。表示の高速化であったり、SEO対策など、Core Web Vitalsを向上させるための施策になります。

内蔵コンポーネントとしてImageやLink、Scriptがあります。これは画像の自動リサイズやリンク先のプリフェッチ、外部スクリプトの読み込みと実行聖書などが可能です。

SEOについてはMetadata APIがあり、 head タグ内を柔軟に変更できます。 public フォルダ内には画像など静的なアセットを入れますが、これらは自動的にCDN経由での配信になり、高速化につながります。

TypeScript

Next.jsはファイル名に tsx を採用し、基本的にTypeScriptベースで開発します。データの受け渡しなどもTypeScriptを使いますので、型安全に開発できます。

これは特にチーム開発時に効力を発揮するでしょう。JavaScriptの選択肢を最初からなくしておけば、TypeScriptベースでの開発が必須になります。型安全な開発ができ、開発効率性が高まります。

Next.jsのはじめかた

Next.jsを使ったプロジェクトは以下のコマンドではじめます。前提として、Node.jsがインストールされていることとします。

npx create-next-app

実際のプロジェクト生成は、ウィザードに沿って進めていけば良いだけです。選択肢は以下の通りです。

プロジェクト名（自由入力）
TypeScriptの利用（Yes/No）
ESLintの利用（Yes/No）
Tailwind CSSの利用（Yes/No）
src ディレクトリの利用（Yes/No）
App Routerの利用（Yes/No）
デフォルトのインポートエイリアスの利用（Yes/No）

後は生成されたフォルダの中で npm run dev を実行すれば、 http://localhost:3000 でアプリケーションが立ち上がります。初期は以下のような構成になっています。

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│     ├── next.svg
│     └── vercel.svg
├── src
│     └── app
│          ├── favicon.ico
│          ├── globals.css
│          ├── layout.tsx
│          ├── page.module.css
│          └── page.tsx
└── tsconfig.json.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│     ├── next.svg
│     └── vercel.svg
├── src
│     └── app
│          ├── favicon.ico
│          ├── globals.css
│          ├── layout.tsx
│          ├── page.module.css
│          └── page.tsx
└── tsconfig.json

変更するのは、基本的に src/app 以下になります。

まとめ

Next.jsは最近のモダンなWebアプリケーション開発で多用されるようになっています。開発生産性が高く、高速化やSEO対策などの最適化も簡単に行えます。

HexabaseのTypeScript SDKを使えば、Next.js内で簡単に使えます。ぜひ、Hexabase × Next.jsによるWebアプリケーション開発に取り組んでください！