Next.js初学者向け勉強会を受けて #Next.js

はじめに

普段は主にLaravelを使ってwebアプリケーションの開発を行っています。
最近、Reactなどのフロント系の勉強を少しずつ始めており、先日はNext.jsで加速するWebアプリケーション開発に参加しました。
その際に学んだことと、実際にNext.jsを少し触ってみたことについてアウトプットしたいと思います。

Next.jsの特徴について

下記の3つの特徴について紹介します。

ファイルベースルーティング
ルートハンドラ
サーバーサイドレンダリング

ファイルベースルーティング

Next.jsアプリケーション内のページルーティングをシンプルかつ直感的に設定する方法です。ファイルベースルーティングにより、ページコンポーネントを特定のディレクトリに配置することで、自動的にルーティングが設定されます。

ルートハンドラ

ルートハンドラはページやAPIエンドポイントのルーティングに関連する特定の機能を提供するための概念です。
Next.jsのバージョンが13.4以降からApp Routerが導入できるようになり、定義の仕方が以前と変わっています。
App Routerを利用した場合のルートハンドラは、Next.jsのapp/ディレクトリ内で使用され、サーバーレス関数やAPIルートを作成するために利用されます。
App Routerを利用せず、Page Routerを利用する場合は、pages直下につくったファイルがすべてルーティングされます。

下記App Routerを利用したい場合の例です。

my-nextjs-app/
├── app/
│   ├── api
|        ├──hello.ts
│ 
├── ...

// app/api/hello.ts
export async function GET(req:Request) {
    return new Response('Hello!');
}

サーバーサイドレンダリング

Next.jsは、サーバーサイドレンダリングと静的生成をサポートし、ページをサーバーサイドで事前にレンダリングすることができます。

サーバーサイドレンダリング（SSR）

Next.jsは、ページをサーバーサイドで動的にレンダリングすることができます。
これは、クライアントからのリクエストごとにページの内容をサーバーで生成し、HTMLとしてクライアントに返すことを意味します。

静的生成（SSG）

Next.jsは、ページを事前に生成し、HTMLファイルとして配信する静的生成もサポートします。これにより、サーバーサイドの負荷を減らし、高速なパフォーマンスを実現できます。また、静的生成されたページはCDNにキャッシュされ、大規模なトラフィックでも高いスケーラビリティを提供します。

Next.jsを試してみる

アプリの作成方法

$ npx create-next-app nextjs-sample
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Documents/nextjs-sample.

GitHubのユーザーを表示する簡単なアプリを作成してみる。
page.tsxのファイルを下記に変更する。

import { use } from "react";

type User = {
  id: number;
  login: string;
  avatar_url: string;
};

const fetchUsers: () => Promise<User[]> = async () => {
  const res = await fetch("https://api.github.com/users");
  return res.json();
};

export default function Page() {
  const users = use(fetchUsers());
  return (
    <div>
      <h1>GitHub Users</h1>
      <div>
        {users.map((user) => {
          return (
            <div key={user.id} className="ml-2 mb-2">
              User NAME：{user.login}
              <img src={user.avatar_url}></img>
            </div>
          );
        })}
      </div>
    </div>
  );
}

実行してみる

$ npm run dev

http://localhost:3000にアクセスし、Githubのユーザー一覧が表示されることを確認します。

感想

今回は、Next.jsの勉強会で学んだことと、実際に少し触ってみたことについて自分なりにまとめてみました。
普段はLaravelで開発をしているため、Next.jsのようなファイルベースのルーティングは新鮮な感じがしました。まだまだ知らないことや、理解が及んでいないことが多いので、少しずつ学びながらアウトプットできればと思います。