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アプリケーション開発に取り組んでください!
Next.js by Vercel – The React Framework
役に立ったら、記事をシェアしてください