こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。
今回は、Next.jsの入門ガイドを紹介します。
Next.jsとは?
Next.jsの概要
Next.jsは、Reactベースのフルスタックフレームワークであり、特に静的サイト生成(SSG)やサーバーサイドレンダリング(SSR)を簡単に実現するための機能を提供します。
Reactとの関係性
Next.jsは、Reactの上に構築されており、Reactの機能を活かしつつ、追加機能を提供します。
Reactの基本情報
Reactは、Facebookによって開発されたオープンソースのJavaScriptライブラリであり、UIコンポーネントの作成を容易にするためのツールです。Reactは、仮想DOM(Virtual DOM)を使用して効率的な更新を行い、単方向データフローに基づく設計を特徴としています。
Next.jsの特徴
この章では、Next.jsの特徴の中から各種レンダリング手法、ファイルシステムベースのルーティング、Route Handlersについて詳しく説明します。
各種レンダリング手法
Next.jsでは、クライアントサイドレンダリング(CSR)に加えて、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)など、複数のレンダリング手法を提供しています。
クライアントサイドレンダリング(CSR):
- JavaScriptを用いてブラウザ上でページを動的に生成する方法です。
- ページ遷移が速く、ユーザーインタラクションがスムーズ。特にシングルページアプリケーション(SPA)に適しており、ユーザーが頻繁に操作するアプリケーションに効果的です。
- 初期ロード時に必要なJavaScriptが大きいと、初期表示が遅くなるというデメリットがあります。
サーバーサイドレンダリング(SSR):
- 各リクエストに対してサーバー側でHTMLを作り、それをブラウザに送る方法です。
- ページの初期表示が非常に速くなり、SEOにも有利です。SSRは、動的なコンテンツを含むページや、ユーザーが最初にアクセスする際のパフォーマンスが重要な場合に特に効果的です。
静的サイト生成(SSG):
- サイトを作るときに、すべてのページを静的なHTMLファイルとして作り、それをサーバーにアップロードする方法です。
- SSGは、頻繁に更新されないコンテンツや、パフォーマンスが重要なランディングページに最適です。
ファイルシステムベースのルーティング
Next.jsでは、ファイルシステムベースのルーティングを使用して簡単に新しいページを作成できます。app
ディレクトリ内にファイルを追加することで、自動的に対応するURLが生成されます。例えば、app/about.js
というファイルを作成すると、/about
というルートが自動的に設定されます。
pages/
配下じゃないの?という疑問があるかもしれませんが、Next.js13からルーティングシステムが刷新され、今までのPages Routeに対して、App Routerという仕組みが導入されました。この仕組みにより、app/
ディレクトリ内にファイルを配置するようになりました。
App Router Incremental Adoption Guide
Route Handlers
Next.jsは、Route Handlersを使用して、APIエンドポイントやカスタムサーバー機能を簡単に実装できます。つまり従来ではバックエンドにて処理していたWebAPI機能を、フロントエンドで実装できるようになります。具体的には、ホスティングされたサーバーで実装されます。 Route Handlersは、特定のHTTPメソッド(GET、POST、PUT、DELETEなど)に対して処理を行うための関数を定義します。これにより、複雑なバックエンドロジックを簡単に構築できます。
Next.jsのセットアップ
Next.jsを使用してプロジェクトを開発するには、まず開発環境をセットアップし、新しいプロジェクトを作成する必要があります。以下の手順に従って進めてください。
システム要件
Node.js:
- Node.js 18.17またはそれ以降。
npm:
- Node.jsと一緒にインストールされるnpm(Node Package Manager)を使用する
プロジェクトの作成方法
Next.jsプロジェクトの作成:
-
create-next-app
を使用して新しいNext.jsプロジェクトを作成します。以下のコマンドをターミナルで実行してください:
$ npx create-next-app@latest
- コマンド実行、プロジェクト名の入力、テンプレートの選択、依存関係のインストールが行われます。
プロジェクトディレクトリに移動:
- 先程のコマンドにて、設定したプロジェクト名のディレクトリに移動します:
$ cd my-app
開発サーバーの起動:
- 開発サーバーを起動して、アプリケーションをローカルで実行します:
npm run dev
- ブラウザで
http://localhost:3000
にアクセスし、Next.jsアプリケーションが正常に動作していることを確認します。
これで、Next.js開発環境のセットアップとプロジェクトの作成が完了しました。
新しいページの作成方法
Next.jsでは、簡単に新しいページを作成できます。以下では、その手順について説明します。
ファイル システム ルーティング
Next.jsのルーティングは、プロジェクトのapp
ディレクトリ内にファイルを追加することで自動的に設定されます。つまり、アプリケーション内のルートはファイルの構造によって決まります。例えば、app/dev/page.tsx
というファイルを作成すると、/dev
というルートが自動的に生成されます。
app
ディレクトリにファイルを作成:
-
app
ディレクトリ内に新しいJavaScriptまたはTypeScriptファイルを作成します。例えば、app/dev/page.tsx
を作成します。
// app/dev/page.tsx export default function DevPage() { return ( <div> <p>This is the dev page</p> </div> ) }
ブラウザで確認:
- 開発サーバーを起動している場合、ブラウザで
http://localhost:3000/dev
にアクセスすると、新しく作成したページが表示されます。
動的ルーティング
動的ルートを作成するには、ファイル名に角括弧([]
)を使用します。例えば、app/blog/[id].js
を作成すると、/blog/1
や/blog/2
のようなURLに対応することができます。
// app/blog/[slug]/page.tsx export default function Page({ params }: { params: { slug: string } }) { return <div>My Blog: {params.slug}</div> }
ブラウザでhttp://localhost:3000/blog/hello
にアクセスすると、My Blog: hello
と表示されます。
このようにして、Next.jsでは簡単に新しいページを作成し、ルーティングを設定することができます。
コンポーネントの作成と使用
Next.jsでは、Reactコンポーネントを使用してUIを構築します。コンポーネントは再利用可能なUIの部品です。
新しいコンポーネントの作成
コンポーネントファイルを作成
-
src/components/Hello
ディレクトリにHello.tsx
という新しいファイルを作成します。
// app/components/Hello/Hello.tsx import React from 'react'; const Hello: React.FC = () => { return <div>Hello World</div>; }; export default Hello;
コンポーネントを使用する
- 例えば、
app/page.tsx
で作成したHello
コンポーネントを使用します。
// app/dev/page.tsx import Hello from '@/components/Hello/Hello'; export default function DevPage() { return ( <div> <p>This is the dev page</p> <Hello /> </div> ) }
ブラウザで確認
- 開発サーバーを起動している場合、ブラウザでページをリロードすると、Helloコンポーネントの内容が表示されます。
This is the dev page Hello World
ナビゲーションの追加
Next.jsでは、next/link
を使用してクライアントサイドのナビゲーションを簡単に実装できます。これにより、ページ遷移が高速でスムーズになります。
ナビゲーションの実装
Linkコンポーネントは推奨のナビゲーションの実装方法です。
ナビゲーションコンポーネントの作成
-
app/components
ディレクトリにNavbar.tsx
という新しいファイルを作成します。
// app/dev/page.tsx import Hello from '@/components/Hello/Hello'; import Link from 'next/link' export default function DevPage() { return ( <div> <p>This is the dev page</p> <Hello /> <Link href="/dashboard">Go Dashboard</Link> </div> ) }
Dashboardページの作成
-
app/components/Navbar.module.css
というファイルを作成します。
// app/dashboard/page.tsx export default function DashboardPage() { return ( <div> <p>This is the dashboard page</p> </div> ) }
ブラウザで確認
- 開発サーバーを起動している場合、ブラウザでページをリロードすると、dashboardページへのリンクが表示されます。
- リンクをクリックすると、
/dashboard
ページが表示されます。
このようにして、Next.jsでは簡単にコンポーネントを作成し、ナビゲーションを追加することができます。
まとめ
Next.jsは、Reactをベースにした多くの機能を提供するフレームワークです。ぜひ使ってみてください!