-
+ {posts.map((post) => (
+
- + {post.title} + + ))} +
-
+ {posts.map((post) => (
+
- + {post.title} + + ))} +
+
+
+
+ )
+}
+```
+
+
+
+
+
+ )
+}
+```
+
+```jsx filename="app/[id]/page.js" highlight={1,12} switcher
+import LikeButton from '@/app/ui/like-button'
+import { getPost } from '@/lib/data'
+
+export default async function Page({ params }) {
+ const post = await getPost(params.id)
+
+ return (
+ {post.title}
+ {/* ... */} +
+
+
+
+ )
+}
+```
+
+```tsx filename="app/ui/like-button.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function LikeButton({ likes }: { likes: number }) {
+ // ...
+}
+```
+
+```jsx filename="app/ui/like-button.js" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function LikeButton({ likes }) {
+ // ...
+}
+```
+
+## Next.jsにおけるサーバーとクライアントコンポーネントの動作原理
+
+### サーバー側
+
+サーバー側では、Next.jsはReactのAPIを使用してレンダリングを調整します。レンダリング作業は個々のルートセグメント（[レイアウトとページ](/docs/app/getting-started/layouts-and-pages)）ごとに分割されます:
+
+- **サーバーコンポーネント**はReact Server Component Payload（RSC Payload）と呼ばれる特別なデータ形式にレンダリングされます
+- **クライアントコンポーネント**とRSC PayloadはHTMLを[事前レンダリング](/docs/app/getting-started/partial-prerendering#how-does-partial-prerendering-work)するために使用されます
+
+> **React Server Component Payload (RSC)とは?**
+>
+> RSC Payloadは、レンダリングされたReactサーバーコンポーネントツリーのコンパクトなバイナリ表現です。クライアント側のReactがブラウザのDOMを更新するために使用します。RSC Payloadには以下が含まれます:
+>
+> - サーバーコンポーネントのレンダリング結果
+> - クライアントコンポーネントがレンダリングされるべき場所のプレースホルダーとそれらのJavaScriptファイルへの参照
+> - サーバーコンポーネントからクライアントコンポーネントに渡されるprops
+
+### クライアント側（初回ロード）
+
+クライアント側では:
+
+1. **HTML**はユーザーにルートの高速な非インタラクティブなプレビューを即座に表示するために使用されます
+2. **RSC Payload**はクライアントとサーバーコンポーネントツリーを調整するために使用されます
+3. **JavaScript**はクライアントコンポーネントをハイドレートし、アプリケーションをインタラクティブにするために使用されます
+
+> **ハイドレーションとは?**
+>
+> ハイドレーションは、Reactが[イベントハンドラ](https://react.dev/learn/responding-to-events)をDOMにアタッチして静的HTMLをインタラクティブにするプロセスです。
+
+### 後続のナビゲーション
+
+後続のナビゲーションでは:
+
+- **RSC Payload**は即時ナビゲーションのために事前取得されキャッシュされます
+- **クライアントコンポーネント**はサーバーレンダリングされたHTMLなしで、完全にクライアント側でレンダリングされます
+
+## 使用例
+
+### クライアントコンポーネントの使用
+
+ファイルの先頭（import文の上）に[`"use client"`](https://react.dev/reference/react/use-client)ディレクティブを追加することで、クライアントコンポーネントを作成できます。
+
+```tsx filename="app/ui/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+ const [count, setCount] = useState(0)
+
+ return (
+ {post.title}
+ {/* ... */} +
+
+ )
+}
+```
+
+```jsx filename="app/ui/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+ const [count, setCount] = useState(0)
+
+ return (
+ {count} likes
+ +
+
+ )
+}
+```
+
+`"use client"`は、サーバーとクライアントのモジュールグラフ（ツリー）間の**境界**を宣言するために使用されます。
+
+ファイルに`"use client"`がマークされると、**そのすべてのインポートと子コンポーネントはクライアントバンドルの一部と見なされます**。つまり、クライアント向けのすべてのコンポーネントにディレクティブを追加する必要はありません。
+
+### JSバンドルサイズの削減
+
+クライアントJavaScriptバンドルのサイズを削減するには、UIの大部分をクライアントコンポーネントとしてマークする代わりに、特定のインタラクティブなコンポーネントに`'use client'`を追加します。
+
+例えば、`{count} likes
+ +{children}
+}
+```
+
+```jsx filename="app/ui/modal.js" switcher
+'use client'
+
+export default function Modal({ children }) {
+ return {children}
+}
+```
+
+そして、親のサーバーコンポーネント（例: `
+
+ {/* クライアントコンポーネント内で使用されているため動作 */}
+ {isOpen &&
+ )
+}
+```
+
+```jsx filename="app/gallery.js" switcher
+'use client'
+
+import { useState } from 'react'
+import { Carousel } from 'acme-carousel'
+
+export default function Gallery() {
+ const [isOpen, setIsOpen] = useState(false)
+
+ return (
+
+
+ {/* クライアントコンポーネント内で使用されているため動作 */}
+ {isOpen &&
+ )
+}
+```
+
+しかし、サーバーコンポーネント内で直接使用しようとすると、エラーが表示されます。これはNext.jsが`
+
+ )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Carousel from './carousel'
+
+export default function Page() {
+ return (
+ View pictures
+ {/* Carouselがクライアントコンポーネントなので動作 */} +
+
+ )
+}
+```
+
+> **ライブラリ作者へのアドバイス**
+>
+> コンポーネントライブラリを構築している場合、クライアント専用機能に依存するエントリポイントに`"use client"`ディレクティブを追加してください。これにより、ユーザーがラッパーを作成することなくサーバーコンポーネントにコンポーネントをインポートできます。
+>
+> 一部のバンドラーは`"use client"`ディレクティブを削除する可能性があることに注意してください。`"use client"`ディレクティブを含めるようにesbuildを設定する方法の例は、[React Wrap Balancer](https://github.com/shuding/react-wrap-balancer/blob/main/tsup.config.ts#L10-L13)と[Vercel Analytics](https://github.com/vercel/analytics/blob/main/packages/web/tsup.config.js#L26-L30)リポジトリで確認できます。
+
+### 環境変数の流出防止
+
+JavaScriptモジュールはサーバーコンポーネントとクライアントコンポーネントの間で共有可能です。つまり、誤ってサーバー専用のコードをクライアント側にインポートしてしまう可能性があります。例えば、以下の関数を考えてみましょう:
+
+```ts filename="lib/data.ts" switcher
+export async function getData() {
+ const res = await fetch('https://external-service.com/data', {
+ headers: {
+ authorization: process.env.API_KEY,
+ },
+ })
+
+ return res.json()
+}
+```
+
+```js filename="lib/data.js" switcher
+export async function getData() {
+ const res = await fetch('https://external-service.com/data', {
+ headers: {
+ authorization: process.env.API_KEY,
+ },
+ })
+
+ return res.json()
+}
+```
+
+この関数にはクライアントに公開してはいけない`API_KEY`が含まれています。
+
+Next.jsでは、`NEXT_PUBLIC_`で始まる環境変数のみがクライアントバンドルに含まれます。プレフィックスがない変数は、Next.jsによって空文字列に置き換えられます。
+
+その結果、`getData()`をクライアント側でインポートして実行しても、期待通りには動作しません。
+
+クライアントコンポーネントでの誤使用を防ぐには、[`server-only`パッケージ](https://www.npmjs.com/package/server-only)を使用できます。
+
+```bash filename="Terminal"
+npm install server-only
+```
+
+そして、サーバー専用コードを含むファイルにこのパッケージをインポートします:
+
+```js filename="lib/data.js"
+import 'server-only'
+
+export async function getData() {
+ const res = await fetch('https://external-service.com/data', {
+ headers: {
+ authorization: process.env.API_KEY,
+ },
+ })
+
+ return res.json()
+}
+```
+
+これで、このモジュールをクライアントコンポーネントにインポートしようとすると、ビルド時にエラーが発生します。
+
+> **補足**: 対応する[`client-only`パッケージ](https://www.npmjs.com/package/client-only)を使用すると、`window`オブジェクトにアクセスするコードなど、クライアント専用ロジックを含むモジュールをマークできます。
diff --git a/apps/docs/content/ja/docs/01-app/01-getting-started/08-fetching-data.mdx b/apps/docs/content/ja/docs/01-app/01-getting-started/08-fetching-data.mdx
new file mode 100644
index 00000000..ed6d5b7c
--- /dev/null
+++ b/apps/docs/content/ja/docs/01-app/01-getting-started/08-fetching-data.mdx
@@ -0,0 +1,658 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:03:52.469Z
+title: データ取得とストリーミングの方法
+nav_title: データ取得
+description: アプリケーションでデータを取得し、コンテンツをストリーミングする方法について説明します。
+related:
+ title: APIリファレンス
+ description: このページで紹介されている機能について詳しく知るには、APIリファレンスをご覧ください。
+ links:
+ - app/api-reference/functions/fetch
+ - app/api-reference/file-conventions/loading
+ - app/api-reference/config/next-config-js/logging
+ - app/api-reference/config/next-config-js/taint
+---
+
+このページでは、[サーバーコンポーネントとクライアントコンポーネント](/docs/app/getting-started/server-and-client-components)でデータを取得する方法と、データに依存するコンポーネントを[ストリーミング](#streaming)する方法について説明します。
+
+## データの取得
+
+### サーバーコンポーネント
+
+サーバーコンポーネントでは以下の方法でデータを取得できます:
+
+1. [`fetch` API](#with-the-fetch-api)を使用する
+2. [ORMまたはデータベース](#with-an-orm-or-database)を使用する
+
+#### `fetch` APIを使用する
+
+`fetch` APIでデータを取得するには、コンポーネントを非同期関数に変更し、`fetch`呼び出しをawaitします。例:
+
+```tsx filename="app/blog/page.tsx" switcher
+export default async function Page() {
+ const data = await fetch('https://api.vercel.app/blog')
+ const posts = await data.json()
+ return (
+ View pictures
+ {/* Carouselがクライアントコンポーネントなので動作 */} +-
+ {posts.map((post) => (
+
- {post.title} + ))} +
-
+ {posts.map((post) => (
+
- {post.title} + ))} +
-
+ {allPosts.map((post) => (
+
- {post.title} + ))} +
-
+ {allPosts.map((post) => (
+
- {post.title} + ))} +
-
+ {allPosts.map((post) => (
+
- {post.title} + ))} +
-
+ {posts.map((post) => (
+
- {post.title} + ))} +
Loading...
+ if (error) return Error: {error.message}
+
+ return (
+ -
+ {data.map((post: { id: string; title: string }) => (
+
- {post.title} + ))} +
Loading...
+ if (error) return Error: {error.message}
+
+ return (
+ -
+ {data.map((post) => (
+
- {post.title} + ))} +
Loading...
+}
+```
+
+```jsx filename="app/blog/loading.js" switcher
+export default function Loading() {
+ // ローディングUIをここで定義
+ return Loading...
+}
+```
+
+ナビゲーション時に、ユーザーはレイアウトと[ローディング状態](#creating-meaningful-loading-states)をすぐに確認でき、レンダリングが完了すると新しいコンテンツが自動的に切り替わります。
+
+
+ {/* このコンテンツはすぐにクライアントに送信されます */}
+
+
+
+ {/* 境界でラップされたコンテンツはストリーミングされます */}
+
+
+
+ )
+}
+```
+
+```jsx filename="app/blog/page.js" switcher
+import { Suspense } from 'react'
+import BlogList from '@/components/BlogList'
+import BlogListSkeleton from '@/components/BlogListSkeleton'
+
+export default function BlogPage() {
+ return (
+ ブログへようこそ
+最新の投稿を以下でお読みください。
+
+ {/* このコンテンツはすぐにクライアントに送信されます */}
+
+
+
+ {/* 境界でラップされたコンテンツはストリーミングされます */}
+
+
+
+ )
+}
+```
+
+### 意味のあるローディング状態の作成
+
+インスタントローディング状態とは、ナビゲーション後にユーザーにすぐに表示されるフォールバックUIです。最適なユーザーエクスペリエンスのために、アプリが応答していることをユーザーが理解できる意味のあるローディング状態を設計することをお勧めします。例えば、スケルトンやスピナー、将来の画面の小さくても意味のある部分（カバー写真、タイトルなど）を使用できます。
+
+開発中は、[React Devtools](https://react.dev/learn/react-developer-tools)を使用してコンポーネントのローディング状態をプレビューおよび検査できます。
+
+## 例
+
+### シーケンシャルなデータ取得
+
+シーケンシャルなデータ取得は、ツリー内のネストされたコンポーネントがそれぞれ独自のデータを取得し、リクエストが[重複排除](/docs/app/deep-dive/caching#request-memoization)されない場合に発生し、応答時間が長くなります。
+
+ブログへようこそ
+最新の投稿を以下でお読みください。
+{artist.name}
+ {/* Playlistsコンポーネントがロード中の間、フォールバックUIを表示 */} +-
+ {playlists.map((playlist) => (
+
- {playlist.name} + ))} +
{artist.name}
+ {/* Playlistsコンポーネントがロード中の間、フォールバックUIを表示 */} +-
+ {playlists.map((playlist) => (
+
- {playlist.name} + ))} +
{artist.name}
+}
+```
+
+データを使用するコンポーネントの外側でリクエストを定義し、[`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) を使用して一緒に解決することで、並列にリクエストを開始できます:
+
+```tsx filename="app/artist/[username]/page.tsx" highlight={3,8,23} switcher
+import Albums from './albums'
+
+async function getArtist(username: string) {
+ const res = await fetch(`https://api.example.com/artist/${username}`)
+ return res.json()
+}
+
+async function getAlbums(username: string) {
+ const res = await fetch(`https://api.example.com/artist/${username}/albums`)
+ return res.json()
+}
+
+export default async function Page({
+ params,
+}: {
+ params: Promise<{ username: string }>
+}) {
+ const { username } = await params
+ const artistData = getArtist(username)
+ const albumsData = getAlbums(username)
+
+ // 両方のリクエストを並列に開始
+ const [artist, albums] = await Promise.all([artistData, albumsData])
+
+ return (
+ <>
+ {artist.name}
+{artist.name}
+これは事前レンダリングされます
+これは事前レンダリングされます
+これは事前レンダリングされます
+これは事前レンダリングされます
+{post.title}
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+import { getPost } from '@/app/lib/data'
+
+export async function generateMetadata({ params }) {
+ const post = await getPost(params.slug)
+ return {
+ title: post.title,
+ description: post.description,
+ }
+}
+
+export default async function Page({ params }) {
+ const post = await getPost(params.slug)
+ return {post.title}
+}
+```
+
+## ファイルベースのメタデータ
+
+以下の特別なファイルがメタデータ用に利用可能です：
+
+- [favicon.ico, apple-icon.jpg, icon.jpg](/docs/app/api-reference/file-conventions/metadata/app-icons)
+- [opengraph-image.jpg, twitter-image.jpg](/docs/app/api-reference/file-conventions/metadata/opengraph-image)
+- [robots.txt](/docs/app/api-reference/file-conventions/metadata/robots)
+- [sitemap.xml](/docs/app/api-reference/file-conventions/metadata/sitemap)
+
+これらを静的メタデータに使用するか、コードでこれらのファイルをプログラム的に生成できます。
+
+## ファビコン
+
+ファビコンは、ブックマークや検索結果でサイトを表す小さなアイコンです。アプリケーションにファビコンを追加するには、`favicon.ico`を作成し、アプリフォルダのルートに追加します。
+
+
+ {post.title}
+
+ )
+ )
+}
+```
+
+```jsx filename="app/blog/[slug]/opengraph-image.js" switcher
+import { ImageResponse } from 'next/og'
+import { getPost } from '@/app/lib/data'
+
+// 画像メタデータ
+export const size = {
+ width: 1200,
+ height: 630,
+}
+
+export const contentType = 'image/png'
+
+// 画像生成
+export default async function Image({ params }) {
+ const post = await getPost(params.slug)
+
+ return new ImageResponse(
+ (
+ // ImageResponse JSX要素
+
+ {post.title}
+
+ )
+ )
+}
+```
+
+`ImageResponse`は、フレックスボックスや絶対配置、カスタムフォント、テキストラッピング、中央揃え、ネストされた画像などの一般的なCSSプロパティをサポートしています。[サポートされているCSSプロパティの完全なリスト](/docs/app/api-reference/functions/image-response)を参照してください。
+
+> **知っておくと便利**：
+>
+> - 例は[Vercel OG Playground](https://og-playground.vercel.app/)で利用可能です。
+> - `ImageResponse`は、HTMLとCSSをPNGに変換するために[`@vercel/og`](https://vercel.com/docs/og-image-generation)、[`satori`](https://github.com/vercel/satori)、`resvg`を使用します。
+> - フレックスボックスとCSSプロパティのサブセットのみがサポートされています。高度なレイアウト（例：`display: grid`）は機能しません。
\ No newline at end of file
diff --git a/apps/docs/content/ja/docs/01-app/01-getting-started/14-deploying.mdx b/apps/docs/content/ja/docs/01-app/01-getting-started/14-deploying.mdx
new file mode 100644
index 00000000..b34ebdcb
--- /dev/null
+++ b/apps/docs/content/ja/docs/01-app/01-getting-started/14-deploying.mdx
@@ -0,0 +1,82 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:00:00.349Z
+title: Next.jsアプリケーションのデプロイ方法
+nav_title: デプロイ
+description: Next.jsアプリケーションをデプロイする方法について学びましょう。
+---
+
+Next.jsアプリケーションは、Node.jsサーバー、Dockerコンテナ、静的エクスポートとしてデプロイしたり、さまざまなプラットフォームで実行できるように適応させたりできます。
+
+| デプロイオプション | 機能サポート |
+| ------------------------------- | ------------------ |
+| [Node.jsサーバー](#nodejs-server) | すべて |
+| [Dockerコンテナ](#docker) | すべて |
+| [静的エクスポート](#static-export) | 制限あり |
+| [アダプター](#adapters) | プラットフォーム依存 |
+
+## Node.jsサーバー
+
+Next.jsはNode.jsをサポートする任意のプロバイダーにデプロイできます。`package.json`に`"build"`と`"start"`スクリプトがあることを確認してください：
+
+```json filename="package.json"
+{
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start"
+ }
+}
+```
+
+その後、`npm run build`を実行してアプリケーションをビルドし、`npm run start`を実行してNode.jsサーバーを起動します。このサーバーはすべてのNext.js機能をサポートしています。必要に応じて、[カスタムサーバー](/docs/app/guides/custom-server)に移行することもできます。
+
+Node.jsデプロイはすべてのNext.js機能をサポートします。インフラストラクチャ向けに[設定する方法](/docs/app/guides/self-hosting)を学びましょう。
+
+### テンプレート
+
+- [Flightcontrol](https://github.com/nextjs/deploy-flightcontrol)
+- [Railway](https://github.com/nextjs/deploy-railway)
+- [Replit](https://github.com/nextjs/deploy-replit)
+
+## Docker
+
+Next.jsは[Docker](https://www.docker.com/)コンテナをサポートする任意のプロバイダーにデプロイできます。これにはKubernetesなどのコンテナオーケストレーターや、Dockerを実行するクラウドプロバイダーが含まれます。
+
+DockerデプロイはすべてのNext.js機能をサポートします。インフラストラクチャ向けに[設定する方法](/docs/app/guides/self-hosting)を学びましょう。
+
+### テンプレート
+
+- [Docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)
+- [Docker マルチ環境](https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env)
+- [DigitalOcean](https://github.com/nextjs/deploy-digitalocean)
+- [Fly.io](https://github.com/nextjs/deploy-fly)
+- [Google Cloud Run](https://github.com/nextjs/deploy-google-cloud-run)
+- [Render](https://github.com/nextjs/deploy-render)
+- [SST](https://github.com/nextjs/deploy-sst)
+
+## 静的エクスポート
+
+Next.jsは静的サイトまたは[シングルページアプリケーション（SPA）](/docs/app/guides/single-page-applications)として開始し、後でサーバーを必要とする機能を使用するようにアップグレードすることができます。
+
+Next.jsは[静的エクスポート](/docs/app/guides/static-exports)をサポートしているため、HTML/CSS/JS静的アセットを提供できる任意のWebサーバーにデプロイしてホストできます。これにはAWS S3、Nginx、Apacheなどのツールが含まれます。
+
+[静的エクスポート](/docs/app/guides/static-exports)として実行すると、サーバーを必要とするNext.js機能は**サポートされません**。[詳細はこちら](/docs/app/guides/static-exports#unsupported-features)をご覧ください。
+
+### テンプレート
+
+- [GitHub Pages](https://github.com/nextjs/deploy-github-pages)
+
+## アダプター
+
+Next.jsはさまざまなプラットフォームで実行できるように適応させ、それらのインフラストラクチャ機能をサポートできます。
+
+サポートされているNext.js機能については、各プロバイダーのドキュメントを参照してください：
+
+- [AWS Amplify Hosting](https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components)
+- [Cloudflare](https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs)
+- [Deno Deploy](https://docs.deno.com/examples/next_tutorial)
+- [Netlify](https://docs.netlify.com/frameworks/next-js/overview/#next-js-support-on-netlify)
+- [Vercel](https://vercel.com/docs/frameworks/nextjs)
+
+> **注記:** すべてのプラットフォームが採用できる[デプロイメントアダプターAPI](https://github.com/vercel/next.js/discussions/77740)を開発中です。完了後、独自のアダプターを作成する方法に関するドキュメントを追加します。
\ No newline at end of file
diff --git a/apps/docs/content/ja/docs/01-app/01-getting-started/15-upgrading.mdx b/apps/docs/content/ja/docs/01-app/01-getting-started/15-upgrading.mdx
new file mode 100644
index 00000000..4cfedcd2
--- /dev/null
+++ b/apps/docs/content/ja/docs/01-app/01-getting-started/15-upgrading.mdx
@@ -0,0 +1,54 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T19:59:29.652Z
+title: Next.jsアプリケーションのアップグレード方法
+nav_title: アップグレード
+description: Next.jsアプリケーションを最新バージョンにアップグレードする方法について学びます。
+related:
+ title: バージョンガイド
+ description: 詳細なアップグレード手順についてはバージョンガイドをご覧ください。
+ links:
+ - app/guides/upgrading/version-15
+ - app/guides/upgrading/version-14
+---
+
+## 最新バージョン
+
+Next.jsの最新バージョンに更新するには、`upgrade`コードモッドを使用できます：
+
+```bash filename="Terminal"
+npx @next/codemod@canary upgrade latest
+```
+
+手動でアップグレードする場合は、最新のNext.jsとReactバージョンをインストールしてください：
+
+```bash filename="Terminal"
+npm i next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+## Canaryバージョン
+
+最新のcanaryバージョンに更新するには、まず最新のNext.jsバージョンで正常に動作していることを確認してください。その後、次のコマンドを実行します：
+
+```bash filename="Terminal"
+npm i next@canary
+```
+
+### Canaryで利用可能な機能
+
+現在canaryで利用可能な機能は以下の通りです：
+
+**キャッシング**:
+
+- [`"use cache"`](/docs/app/api-reference/directives/use-cache)
+- [`cacheLife`](/docs/app/api-reference/functions/cacheLife)
+- [`cacheTag`](/docs/app/api-reference/functions/cacheTag)
+- [`dynamicIO`](/docs/app/api-reference/config/next-config-js/dynamicIO)
+
+**認証**:
+
+- [`forbidden`](/docs/app/api-reference/functions/forbidden)
+- [`unauthorized`](/docs/app/api-reference/functions/unauthorized)
+- [`forbidden.js`](/docs/app/api-reference/file-conventions/forbidden)
+- [`unauthorized.js`](/docs/app/api-reference/file-conventions/unauthorized)
+- [`authInterrupts`](/docs/app/api-reference/config/next-config-js/authInterrupts)
\ No newline at end of file
diff --git a/apps/docs/content/ja/docs/01-app/01-getting-started/index.mdx b/apps/docs/content/ja/docs/01-app/01-getting-started/index.mdx
new file mode 100644
index 00000000..e3414307
--- /dev/null
+++ b/apps/docs/content/ja/docs/01-app/01-getting-started/index.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-02T19:59:05.957Z
+title: はじめよう
+description: Next.js App Router を使用してフルスタック Web アプリケーションを作成する方法を学びましょう。
+---
+
+Next.js ドキュメントへようこそ！
+
+この「**はじめよう**」セクションでは、最初の Next.js アプリを作成し、すべてのプロジェクトで使用するコア機能を学ぶことができます。
+
+## 前提知識
+
+当ドキュメントでは、Web 開発にある程度慣れていることを前提としています。始める前に、以下の技術に慣れていると役立ちます:
+
+- HTML
+- CSS
+- JavaScript
+- React
+
+React に初めて触れる方や復習が必要な方は、まず [React Foundations コース](/learn/react-foundations) から始めることをお勧めします。また、学習しながらアプリケーションを構築する [Next.js Foundations コース](/learn/dashboard-app) もご利用いただけます。
+
+## 次のステップ
\ No newline at end of file
diff --git a/apps/docs/content/ja/docs/01-app/02-guides/analytics.mdx b/apps/docs/content/ja/docs/01-app/02-guides/analytics.mdx
new file mode 100644
index 00000000..1969ed39
--- /dev/null
+++ b/apps/docs/content/ja/docs/01-app/02-guides/analytics.mdx
@@ -0,0 +1,235 @@
+---
+source-updated-at: 2025-05-19T22:31:51.000Z
+translation-updated-at: 2025-06-02T20:00:21.371Z
+title: Next.jsアプリケーションにアナリティクスを追加する方法
+nav_title: アナリティクス
+description: Next.js Speed Insightsを使用してページパフォーマンスを測定・追跡する
+---
+
+{/* このドキュメントの内容はApp RouterとPages Routerで共有されています。Pages Router固有のコンテンツを追加する場合は`
+
+
+## ナンス（Nonce）
+
+[ナンス](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce)は、一度限りの使用のために作成される一意のランダムな文字列です。CSPと組み合わせて使用することで、厳格なCSPディレクティブをバイパスして特定のインラインスクリプトやスタイルの実行を選択的に許可します。
+
+### ナンスを使用する理由
+
+CSPは悪意のあるスクリプトをブロックするように設計されていますが、インラインスクリプトが必要な正当なシナリオもあります。そのような場合、ナンスは正しいナンスを持つこれらのスクリプトの実行を許可する方法を提供します。
+
+### ミドルウェアでナンスを追加する
+
+[ミドルウェア](/docs/app/building-your-application/routing/middleware)を使用すると、ページがレンダリングされる前にヘッダーを追加し、ナンスを生成できます。
+
+ページが表示されるたびに、新しいナンスを生成する必要があります。これは、**ナンスを追加するために動的レンダリングを使用する必要がある**ことを意味します。
+
+例:
+
+```ts filename="middleware.ts" switcher
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+ const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+ const cspHeader = `
+ default-src 'self';
+ script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+ style-src 'self' 'nonce-${nonce}';
+ img-src 'self' blob: data:;
+ font-src 'self';
+ object-src 'none';
+ base-uri 'self';
+ form-action 'self';
+ frame-ancestors 'none';
+ upgrade-insecure-requests;
+`
+ // 改行文字とスペースを置換
+ const contentSecurityPolicyHeaderValue = cspHeader
+ .replace(/\s{2,}/g, ' ')
+ .trim()
+
+ const requestHeaders = new Headers(request.headers)
+ requestHeaders.set('x-nonce', nonce)
+
+ requestHeaders.set(
+ 'Content-Security-Policy',
+ contentSecurityPolicyHeaderValue
+ )
+
+ const response = NextResponse.next({
+ request: {
+ headers: requestHeaders,
+ },
+ })
+ response.headers.set(
+ 'Content-Security-Policy',
+ contentSecurityPolicyHeaderValue
+ )
+
+ return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+ const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+ const cspHeader = `
+ default-src 'self';
+ script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+ style-src 'self' 'nonce-${nonce}';
+ img-src 'self' blob: data:;
+ font-src 'self';
+ object-src 'none';
+ base-uri 'self';
+ form-action 'self';
+ frame-ancestors 'none';
+ upgrade-insecure-requests;
+`
+ // 改行文字とスペースを置換
+ const contentSecurityPolicyHeaderValue = cspHeader
+ .replace(/\s{2,}/g, ' ')
+ .trim()
+
+ const requestHeaders = new Headers(request.headers)
+ requestHeaders.set('x-nonce', nonce)
+ requestHeaders.set(
+ 'Content-Security-Policy',
+ contentSecurityPolicyHeaderValue
+ )
+
+ const response = NextResponse.next({
+ request: {
+ headers: requestHeaders,
+ },
+ })
+ response.headers.set(
+ 'Content-Security-Policy',
+ contentSecurityPolicyHeaderValue
+ )
+
+ return response
+}
+```
+
+デフォルトでは、ミドルウェアはすべてのリクエストで実行されます。[`matcher`](/docs/app/building-your-application/routing/middleware#matcher)を使用して、特定のパスでミドルウェアを実行するようにフィルタリングできます。
+
+CSPヘッダーを必要としないプリフェッチ(`next/link`からの)と静的アセットのマッチングを無視することをお勧めします。
+
+```ts filename="middleware.ts" switcher
+export const config = {
+ matcher: [
+ /*
+ * 以下で始まるパスを除くすべてのリクエストパスにマッチ:
+ * - api (APIルート)
+ * - _next/static (静的ファイル)
+ * - _next/image (画像最適化ファイル)
+ * - favicon.ico (ファビコンファイル)
+ */
+ {
+ source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+ missing: [
+ { type: 'header', key: 'next-router-prefetch' },
+ { type: 'header', key: 'purpose', value: 'prefetch' },
+ ],
+ },
+ ],
+}
+```
+
+```js filename="middleware.js" switcher
+export const config = {
+ matcher: [
+ /*
+ * 以下で始まるパスを除くすべてのリクエストパスにマッチ:
+ * - api (APIルート)
+ * - _next/static (静的ファイル)
+ * - _next/image (画像最適化ファイル)
+ * - favicon.ico (ファビコンファイル)
+ */
+ {
+ source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+ missing: [
+ { type: 'header', key: 'next-router-prefetch' },
+ { type: 'header', key: 'purpose', value: 'prefetch' },
+ ],
+ },
+ ],
+}
+```
+
+### ナンスの読み取り
+
+例
+ +- [Strict CSP](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp) + +
+
+
+既存のCSS-in-JSソリューションをどれでも使用できます。最もシンプルなのはインラインスタイルです:
+
+```jsx
+function HiThere() {
+ return サンプル
+ +- [Styled JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx) +- [Styled Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components) +- [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion) +- [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria) +- [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron) +- [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs) +- [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-fela) +- [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches) + +こんにちは
+} + +export default HiThere +``` + +私たちはスコープ付きCSSのサポートを提供するために[styled-jsx](https://github.com/vercel/styled-jsx)をバンドルしています。 +目的はWebコンポーネントに似た「シャドウCSS」をサポートすることですが、残念ながら[サーバーレンダリングはサポートされておらず、JSのみです](https://github.com/w3c/webcomponents/issues/71)。 + +他の人気のあるCSS-in-JSソリューション（Styled Componentsなど）については上記のサンプルを参照してください。 + +`styled-jsx`を使用したコンポーネントは次のようになります: + +```jsx +function HelloWorld() { + return ( +
+ Hello world
+
+ )
+}
+
+export default HelloWorld
+```
+
+より多くの例については[styled-jsxドキュメント](https://github.com/vercel/styled-jsx)を参照してください。
+
+### JavaScriptの無効化
+
+はい、JavaScriptを無効にしても、本番ビルド(`next start`)ではCSSが読み込まれます。開発中は、[Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh)による最適な開発者体験を提供するためにJavaScriptを有効にする必要があります。
+
+スコープ付き!
+ + +{title}
+{desc}
+{title}
+{desc}
+Hello World
+} + +export default HomePage +``` + +動的ルックアップはインライン化されないことに注意してください： + +```js +// これは変数を使用しているためインライン化されません +const varName = 'NEXT_PUBLIC_ANALYTICS_ID' +setupAnalyticsService(process.env[varName]) + +// これは変数を使用しているためインライン化されません +const env = process.env +setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID) +``` + +### ランタイム環境変数 + +Next.jsはビルド時とランタイムの両方の環境変数をサポートします。 + +**デフォルトでは、環境変数はサーバーでのみ利用可能です**。ブラウザに環境変数を公開するには、`NEXT_PUBLIC_`をプレフィックスする必要があります。ただし、これらの公開環境変数は`next build`中にJavaScriptバンドルにインライン化されます。 + +
+ {optimisticMessages.map((m, i) => (
+
+ )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import { useOptimistic } from 'react'
+import { send } from './actions'
+
+export function Thread({ messages }) {
+ const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+ messages,
+ (state, newMessage) => [...state, { message: newMessage }]
+ )
+
+ const formAction = async (formData) => {
+ const message = formData.get('message')
+ addOptimisticMessage(message)
+ await send(message)
+ }
+
+ return (
+ {m.message}
+ ))}
+
+
+ {optimisticMessages.map((m) => (
+
+ )
+}
+```
+
+## ネストされたフォーム要素
+
+`{m.message}
+ ))}
+
+