# はじめに
Next.js15.1が出たので、気になった内容をまとめてみました。
間違いなどありましたら、コメントなどで教えてください。

https://nextjs.org/blog/next-15-1

# 各種コマンド

Next.jsの最新バージョンにアップグレードする際に、必要なコードの修正や設定変更を自動的に行います。手動で変更する手間を省く。
![img](/mosaic-code.jpg)

Next.jsプロジェクトで使われているnext、react、react-domを手動で最新バージョンに更新します。この場合、コードの修正は自分で行う必要があります。
![img](/mosaic-code.jpg)

最新のバージョンで新規プロジェクトを作成
![img](/mosaic-code.jpg)

# 主な更新内容
- **React 19を完全サポート**
- **エラーデバッグの改善**
- **after(安定)**
- **forbidden(403)/unauthorized(401) エラーページの追加 (Canary)**

# それぞれの詳細
主な変更内容についての詳細を書いていきます。

## React 19を完全サポート
React 19が、Pages RouterとApp Routerの両方で正式にサポートされました。
React 19についての詳しい情報は、以下が参考になります。

https://react.dev/blog/2024/12/05/react-19

https://zenn.dev/uhyo/books/react-19-new

## エラーデバッグの改善
Next.jsのエラーデバッグが改善され、ターミナル、ブラウザー、または接続されたデバッガーのいずれに問題が表示されても、問題の原因をすばやく特定できるようになりました。
これらの機能強化は、WebpackとTurbopack (現在は Next.js 15で安定) の両方に適用されます。
以下に、主な変更点が記載されています。
もっと詳しい内容については、追記したいと思います。

https://nextjs.org/blog/next-15-1#react-19-stable

## after APIの安定版がリリース
レスポンスがストリーミングを終了した後に処理するタスクをスケジューリングできるようにし、プライマリ・レスポンスをブロックすることなくセカンダリ・タスクを実行できるようにするAPIです。
そのafter APIが安定版としてリリースされました。
after APIの詳しい情報は、以下をご覧ください。

https://nextjs.org/docs/app/api-reference/functions/after

## forbidden(403)/unauthorized(401) エラーページの追加 (Canary)
実験的にですが、403, 401の場合に専用のエラーページを表示する機能が追加されました。
実装方法は、以下のようになります。

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

専用のエラーページは、今まで同様に「app」フォルダ配下にファイルを作成します。
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
Next.js15.1が出たので、気になった内容をまとめてみました。
間違いなどありましたら、コメントなどで教えてください。

https://nextjs.org/blog/next-15-1

# 各種コマンド

Next.jsの最新バージョンにアップグレードする際に、必要なコードの修正や設定変更を自動的に行います。手動で変更する手間を省く。
```
npx @next/codemod@canary upgrade latest
```

Next.jsプロジェクトで使われているnext、react、react-domを手動で最新バージョンに更新します。この場合、コードの修正は自分で行う必要があります。
```
npm install next@latest react@latest react-dom@latest
```

最新のバージョンで新規プロジェクトを作成
```
npx create-next-app@latest
```

# 主な更新内容
- **React 19を完全サポート**
- **エラーデバッグの改善**
- **after(安定)**
- **forbidden(403)/unauthorized(401) エラーページの追加 (Canary)**

# それぞれの詳細
主な変更内容についての詳細を書いていきます。

## React 19を完全サポート
React 19が、Pages RouterとApp Routerの両方で正式にサポートされました。
React 19についての詳しい情報は、以下が参考になります。

https://react.dev/blog/2024/12/05/react-19

https://zenn.dev/uhyo/books/react-19-new

## エラーデバッグの改善
Next.jsのエラーデバッグが改善され、ターミナル、ブラウザー、または接続されたデバッガーのいずれに問題が表示されても、問題の原因をすばやく特定できるようになりました。
これらの機能強化は、WebpackとTurbopack (現在は Next.js 15で安定) の両方に適用されます。
以下に、主な変更点が記載されています。
もっと詳しい内容については、追記したいと思います。

https://nextjs.org/blog/next-15-1#react-19-stable

## after APIの安定版がリリース
レスポンスがストリーミングを終了した後に処理するタスクをスケジューリングできるようにし、プライマリ・レスポンスをブロックすることなくセカンダリ・タスクを実行できるようにするAPIです。
そのafter APIが安定版としてリリースされました。
after APIの詳しい情報は、以下をご覧ください。

https://nextjs.org/docs/app/api-reference/functions/after

## forbidden(403)/unauthorized(401) エラーページの追加 (Canary)
実験的にですが、403, 401の場合に専用のエラーページを表示する機能が追加されました。
実装方法は、以下のようになります。

``` next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
};
 
export default nextConfig;
```

``` tsx
import { verifySession } from '@/app/lib/dal';
import { forbidden } from 'next/navigation';
 
export default async function AdminPage() {
  const session = await verifySession();
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden();
  }
 
  // Render the admin page for authorized users
  return <h1>Admin Page</h1>;
}
```

専用のエラーページは、今まで同様に「app」フォルダ配下にファイルを作成します。
``` app/forbidden.tsx
import Link from 'next/link';
 
export default function Forbidden() {
  return (
    <div>
      <h2>Forbidden</h2>
      <p>You are not authorized to access this resource.</p>
      <Link href="/">Return Home</Link>
    </div>
  );
}
```

``` app/unauthorized.tsx
import Link from 'next/link';
 
export default function Unauthorized() {
  return (
    <div>
      <h2>Unauthorized</h2>
      <p>Please log in to access this page.</p>
      <Link href="/login">Go to Login</Link>
    </div>
  );
}
```

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

各種コマンド

続きを読むには単価診断を受けてください 30秒