webエンジニアの風速です。
普段業務でReactを使用しているのですが、そろそろNext.jsなるものを知らないといけないと思っていたのでNext.jsを軽くさわってみました。
Next.jsって？
フルスタックなWebアプリケーションを構築するためのReactフレームワークです。
Next.jsは、Reactコンポーネントを使用してユーザーインターフェースを構築し、追加機能と最適化を行います。
内部的には、Next.jsはReactに必要なバンドルやコンパイルなどのツールも抽象化し、自動的に構成します。
これにより、構成に時間を費やすのではなく、アプリケーションの構築に集中できます。
個人の開発者でも、大規模なチームの一員でも、Next.jsはインタラクティブで動的、かつ高速なReactアプリケーションの構築に役立ちます。
とのことです。（公式翻訳引用）
create-next-appしてみた
自分の環境にyarnが入っていたので自分はyarnで進めます。
TypeScriptを使用する場合はオプションが必要らしい。
プロジェクト名を入力して、一旦オプションはほぼデフォルトで、今回はPages Routerで検証したいのでApp RouterはNoにしています。
# npx
npx create-next-app@latest --typescript
# yarn
yarn create next-app --typescript
✔ What is your project named? … nextjs-playground-pages
✔ 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
create-next-appできたのでローカルで起動します。
yarn dev
起動できました。
Routing
Pages Router には、ページの概念に基づいて構築されたファイルシステムベースのルーターがあります。
ファイルがpagesディレクトリに追加されると、自動的にルートとして利用できるようになります。
とのことです。
Index routes
ルーターは自動的にindexという名前のファイルをディレクトリのルートにルーティングされる
pages/blog/index.tsx → /blog
公式のドキュメント通りに単純にテキストを返すだけのコンポーネントを作成して配置しました。
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function Blog() {
return (
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<>blog</>
</main>
);
}
Nested routes
ルーターはネストされたファイルをサポートします。ネストされたフォルダ構造を作成した場合でも、ファイルは自動的に同じ方法でルーティングされます。
pages/blog/first-post.tsx → /blog/first-post
Pages with Dynamic Routes
Next.jsは動的なルートを持つページをサポートしています。たとえば、pages/posts/[id].jsというファイルを作成すると、posts/1やposts/2などにアクセスできるようになります。
useRouterを使用すれば、パラメーターを取り出せるみたいです。
import { useRouter } from 'next/router'
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function Posts() {
const router = useRouter()
return (
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<>{`posts/${router.query.id}`}</>
</main>
);
}
Catch-all Segments
ファイル名を[...param].tsx or .jsのようにすると複数のパラメーターも受け取れる。
/posts/1/2/3とリクエストした場合
[...id].tsx -> {id: ['1', '2', '3']}
同じパスだと単一のパラメーターの方が優先される?
Optional Catch-all Segments
ファイル名を[[...param]].tsx or .jsのようにするとオプショナルでパラメーターを受け取れる。
/posts //リクエストURL
{id: []}
/posts/1
{id: ['1']}
/posts/1/2
{id: ['1', '2']}
/posts/1/2/3
{id: ['1', '2', '3']}
同じパスだとCatch-all Segmentsが優先される？
API Routes
API Routesは、Next.jsで公開APIを構築するためのソリューションです。
pages/apiフォルダ内のファイルはすべて/api/*にマップされ、ページの代わりにAPIエンドポイントとして扱われます。これらはサーバーサイドのみのバンドルで、クライアントサイドのバンドルサイズを増やすことはありません。
とのことです。
以下はcreate-next-appで作成したプロジェクトに入っていました。
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
name: string;
};
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>,
) {
res.status(200).json({ name: "John Doe" });
}
実際に叩いてみると、ちゃんと返却されました。
curl -X GET http://localhost:3000/api/hello
{"name":"John Doe"}
感想
Reactアプリだと、ライブラリの導入が必要（今は何かあるかも？）ですが、Next.jsだと簡単にルーティングが実現できたり、簡単なAPIも提供できたりするのはかなり便利だと思います。
ほかにもServer Side RenderingやStatic Site Generationなどいろいろ盛り盛り(むしろそっちの方が知りたい)なので、今後さわっていけたらと思います。
参考
- Next.js公式ドキュメント
- Next.js 非公式日本語翻訳ドキュメント