Next.js入門してみた

記事タイトルとURLをコピーする

こんにちは、アプリケーションサービス部ディベロップメントサービス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を使用してプロジェクトを開発するには、まず開発環境をセットアップし、新しいプロジェクトを作成する必要があります。以下の手順に従って進めてください。

システム要件

  1. Node.js

  2. 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にアクセスすると、新しく作成したページが表示されます。

動的ルーティング

Dynamic Routes

動的ルートを作成するには、ファイル名に角括弧([])を使用します。例えば、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コンポーネントは推奨のナビゲーションの実装方法です。

Link Component

ナビゲーションコンポーネントの作成

  • 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をベースにした多くの機能を提供するフレームワークです。ぜひ使ってみてください!

外崎 隼斗 (記事一覧)

アプリケーションサービス部ディベロップサービス1課

雑食系