Next.jsちょっとさわってみた

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
```
起動できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/77677a72-72b3-9ed4-7038-ed6fc701faf4.png)

# Routing
>Pages Router には、ページの概念に基づいて構築されたファイルシステムベースのルーターがあります。
ファイルがpagesディレクトリに追加されると、自動的にルートとして利用できるようになります。

とのことです。

## Index routes
> ルーターは自動的にindexという名前のファイルをディレクトリのルートにルーティングされる
```
pages/blog/index.tsx → /blog
```

公式のドキュメント通りに単純にテキストを返すだけのコンポーネントを作成して配置しました。

```pages/blog/index.tsx
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>
    );
}
```
![スクリーンショット 2024-05-31 14.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b4126f96-3f05-8e28-c5be-39a05f57bd36.png)

## Nested routes
>ルーターはネストされたファイルをサポートします。ネストされたフォルダ構造を作成した場合でも、ファイルは自動的に同じ方法でルーティングされます。

```
pages/blog/first-post.tsx → /blog/first-post
```
![スクリーンショット 2024-05-31 15.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/d17d38d3-cdfb-23c9-58fa-11dd75b002d8.png)

## Pages with Dynamic Routes
>Next.jsは動的なルートを持つページをサポートしています。たとえば、pages/posts/[id].jsというファイルを作成すると、posts/1やposts/2などにアクセスできるようになります。

useRouterを使用すれば、パラメーターを取り出せるみたいです。
```posts/[id].tsx
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>
    );
}
```

![スクリーンショット 2024-05-31 15.31.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/87c93cca-34fc-feab-bdac-ef93fb326697.png)

### 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で作成したプロジェクトに入っていました。

``` pages/api/hello.tsx
// 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公式ドキュメント**

https://nextjs.org/docs

- **Next.js 非公式日本語翻訳ドキュメント**

https://nextjs-ja-translation-docs.vercel.app/