Next.js 15 メモ

実践 Next.js のメモ。24年12月時点の React 19 + Next.js 15 環境ベースでのメモ。

page.tsx で受ける params は await が必要。

Async Request APIs (Breaking change)
Previously synchronous Dynamic APIs that rely on runtime information are now asynchronous: cookies, headers, draftMode, params (in layout.js, page.js, route.js, default.js, opengraph-image, twitter-image, icon, and apple-icon), and searchParams (in page.js)

type Params = Promise<{ categoryName: string }>;

export default async function Page({ params }: { params: Params }) {
  const { categoryName } = await params;
  return (
    <div>
      <h1>Categories</h1>
      <p>Category: {categoryName}</p>
    </div>
  );
}

yuheitomi

Next.js での設計の考え方メモ

サーバーサイドレンダリングを基本に考えて、クライアントサイド ("use client") は必要な部分のみ使う
コンポーネント単位で <Suspense> をうまく使いページ全体での読み込みの遅延を避ける。そのために、コンポーネント単位で data fetching できるようにする。RSC や Server Actions との親和性が良い。

yuheitomi

Next.js での設計の考え方メモ：クライアントサイドでのレンダリングに頼らず、URL search params を活用することのメリット

ブックマークあるいはシェアできる
サーバーサイドでそのままデータを fetch してレンダリングできる
トラック・分析しやすい

yuheitomi

Next.js x Tailwind CSS でのフォント設定の仕方。これが正しいか分からないがメモ。

ルートの layout.tsx にてフォントを設定（この場合 Noto Sans JP）。

import { Noto_Sans_JP } from "next/font/google"
import "./globals.css"

const notoSansJP = Noto_Sans_JP({
  variable: "--font-noto-sans-jp",
  weight: ["400", "700"],
  subsets: ["latin"],
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={notoSansJP.variable}>{children}</body>
    </html>
  )
}

notoSansJP.variable に指定した名前を global.css にて参照して適用する。

body {
  font-family: Arial, var(--font-noto-sans-jp), Helvetica, sans-serif;
}

yuheitomi

Next.js の Route Handler (API) はクライアントコンポーネントから呼び出すときは fetch('/api/xxx') で問題ないが、サーバーコンポーネントや Server Actions から呼び出すときはドメインも含めて指定が必要。これを使い分けるために、next.config.ts にて以下を設定して URL 環境変数に格納する。

import type { NextConfig } from "next";

const baseUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

const nextConfig: NextConfig = {
  env: {
    URL: baseUrl,
    API_ENDPOINT: `${baseUrl}/api`,
  },
};

export default nextConfig;