【Next.js】バージョン15.5の個人的まとめ【PageProps】

はじめに

こんにちは、株式会社TOKOSのツキヤです！
この記事では、2025年8月にバージョンアップしたNext.jsのバージョン15.5について、個人的に注目したい点を中心に解説していきます💪

今回のバージョンアップは、マイナーバージョンアップの割には色々機能が追加されてるので、気になる人はぜひ最後まで読んでください😎

アップデート内容

Turobpackのproduction buildが可能に

少し前から、開発環境ではnext dev --turbopackとすると、サーバーがturbopackで立ち上がるようになっていましたね。
こちらに関して、(本番の)ビルド時にも適用することができるようになりました🎉

これにより、コンパイルの時間が数倍早くなるそうです!
ただ「(beta)」という文字はあるのでオプションをつけるかどうかは慎重に見ていきたいですね🤔

middleware(.js) のランタイム指定のNode.jsが安定版に

バージョン15.2から、middlewareで下記設定を行うことにより、ランタイムにNode.jsを設定できていた部分ていました。
こちらが安定版になりました!

export const config = {
  runtime: 'nodejs', // 安定版に🎉
}

export function middleware(request: NextRequest) {
  // Node.jsの全APIおよびnpmパッケージへのアクセスが可能になりました🥰
  const fs = require('fs')
  // ...
}

export const config = {
  runtime: 'nodejs', // 安定版に🎉
}

export function middleware(request: NextRequest) {
  // Node.jsの全APIおよびnpmパッケージへのアクセスが可能になりました🥰
  const fs = require('fs')
  // ...
}

これにより、Edgeランタイムでは使えなかったNode.jsランタイム特有のAPIを使用できるようになりました🎉

ツキヤ

最近はVercelはEdgeランタイムよりもNode.jsランタイムに戻していこうという動きがありますね!

Typed Routesが安定版に

ここからは、機能というよりはDX(Developer Experience)的な改善部分になります!

まずは、Typed Routesが安定版になりました!
Typed Routesとは、簡単に言うとnext/linkに指定するhrefに対して存在するパスのみの型安全性を提供する機能です!
具体例で言うと、users/page.tsx, users/[userId]/page.tsx, settings/page.tsxという3つのページのみが有る場合、<Link>コンポーネントには"/users", "/users/1", "/settings"といった文字列しか指定できず、それ以外の文字列の場合は型エラーになってくれます!

export function LinksCopmonent() {
 return (
   <>
     <Link href="/users" />        // => ✅OK
     <Link href="/users/1" />      // => ✅OK
     <Link href="/users/100" />    // => ✅OK
     <Link href="/users?page=2" /> // => ✅OK
     <Link href="/unknown" />      // => ❌型エラー!
   </>
 )
}

export function LinksCopmonent() {
 return (
   <>
     <Link href="/users" />        // => ✅OK
     <Link href="/users/1" />      // => ✅OK
     <Link href="/users/100" />    // => ✅OK
     <Link href="/users?page=2" /> // => ✅OK
     <Link href="/unknown" />      // => ❌型エラー!
   </>
 )
}

これにより、存在しないページへのリンク等に対して未然に防げるようになります!
この機能が安定版になったので、next.config.tsで指定をして積極的に使っていきたいですね!

const nextConfig = {
  typedRoutes: true
}

export default nextConfig

const nextConfig = {
  typedRoutes: true
}

export default nextConfig

PageProps、LayoutPropsという型の提供

なんとpage.tsx、layout.tsx自体の型が生成されるようになりました🎉
いつも自分自身でクエリパラメータ等をそれっぽく書いていた部分をNext.js自身に任せることができるのはかなり嬉しいと思います!
具体的には、PageProps<"users">のようにジェネリクスでページのURLを指定する形で使用します。

// 旧: 自前でパスパラメータ等を定義
export default async function UserPage(props: {
  // 🤮 必要な値のの型を自分で定義
  params: Promise<{ userId: string }>
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const { userId } = await props.params
  const const searchParams = await props.searchParams
  // ...
}


// 新: PagePropsを使用
export default async function UserPage(
  props: PageProps<"users/[userId]"> // ✅ これだけで色々定義される!
) {
  const { userId } = await props.params
  const const searchParams = await props.searchParams
  // ...
}

// 旧: 自前でパスパラメータ等を定義
export default async function UserPage(props: {
  // 🤮 必要な値のの型を自分で定義
  params: Promise<{ userId: string }>
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const { userId } = await props.params
  const const searchParams = await props.searchParams
  // ...
}


// 新: PagePropsを使用
export default async function UserPage(
  props: PageProps<"users/[userId]"> // ✅ これだけで色々定義される!
) {
  const { userId } = await props.params
  const const searchParams = await props.searchParams
  // ...
}

型の下記間違え等も無いので、こちらも積極的に使いたいです💪

ただ、1点注意事項です🚨
PageProps(LayoutProps)は型をNext.js自身が動的に生成します。具体的には、.next/types/配下に型が生成されます。
開発環境の場合では、サーバーを立ち上げていればファイル構造が変更された際に即時で型を再生成してくれます!
ですが、eslint等での型チェック時には事前にPagePropsが作成される訳ではありません😨

何が困るかと言うと、CI等でeslintなどを実行している場合です。基本的にCIでeslintを実行する際は、npm install → npm run lintという流れが基本かと思います!
ですが、この流れではPagePropsの型が生成されていないのでエラーになってしまいます🤮
そのような場合の回避策として、next typegenというコマンドを用意してくれています!

$ next typegen

$ next typegen

これにより、コマンド上でPagePropsを生成してくれます!
つまり、PagePropsを使用した状態でeslint等のCIを回したい場合は事前にnext typegenを入れ込むことを忘れないようにしましょう📝

next lintコマンドが非推奨に

最後に、非推奨化の話です。
今までは、create-next-app等でNext.jsのアプリケーションを作成した際、package.jsonの"lint"部分には"next lint"が設定されていました。
こちらのコマンドが非推奨になりました。もっと言うと、次のメジャーバージョンであるNext.js16で削除されます😱

これからは、eslintやbiome等のLinterのコマンドをそのまま実行するようにしましょう!

ツキヤ

余談ですが、個人的にはLinterはBiomeよりもOxcに期待しています✨

おわりに

今回はNext.jsのバージョン15.5において個人的に気になったポイントを解説しました!

他にも変更点はありますので、ひご自身で公式ドキュメントも見てみてください🙌

参考

Next.js 15.5

nextjs.org

スポンサーリンク