diff --git a/src/content/docs/ja/basics/astro-pages.mdx b/src/content/docs/ja/basics/astro-pages.mdx index 1bf20e3b9ef01..3018e534f28e3 100644 --- a/src/content/docs/ja/basics/astro-pages.mdx +++ b/src/content/docs/ja/basics/astro-pages.mdx @@ -22,7 +22,7 @@ Astroは`src/pages/`ディレクトリで次のファイルタイプをサポー Astroは、**ファイルベースルーティング**と呼ばれるルーティング手法を採用しています。 `src/pages/`ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。 -また、[動的ルーティング](/ja/guides/routing/#dynamic-routes)を使用して、1つのファイルから複数のページを生成できます。これにより、[コンテンツコレクション](/ja/guides/content-collections/)や[CMS](/ja/guides/cms/)など、特別な`/pages/`ディレクトリの外にコンテンツがあっても、ページを作成できます。 +また、[動的ルーティング](/ja/guides/routing/#動的ルーティング)を使用して、1つのファイルから複数のページを生成できます。これにより、[コンテンツコレクション](/ja/guides/content-collections/)や[CMS](/ja/guides/cms/)など、特別な`/pages/`ディレクトリの外にコンテンツがあっても、ページを作成できます。 [Astroのルーティング](/ja/guides/routing/)について詳しくみる。 diff --git a/src/content/docs/ja/basics/layouts.mdx b/src/content/docs/ja/basics/layouts.mdx index feca5964ad8c0..006e6f9b4b787 100644 --- a/src/content/docs/ja/basics/layouts.mdx +++ b/src/content/docs/ja/basics/layouts.mdx @@ -16,7 +16,7 @@ import ReadMore from '~/components/ReadMore.astro' レイアウトコンポーネントがページシェルを含んでいる場合、レイアウトコンポーネントの``タグは他の全てのタグの親である必要があります。 -レイアウトコンポーネントは一般的にプロジェクト内の`src/layouts`ディレクトリに配置されますが、これは必須ではなく、プロジェクト内のどこに置いても構いません。レイアウトコンポーネントをページと同じ場所に置くこともでき、その場合は[レイアウト名の先頭に`_`を付けます](/ja/guides/routing/#excluding-pages)。 +レイアウトコンポーネントは一般的にプロジェクト内の`src/layouts`ディレクトリに配置されますが、これは必須ではなく、プロジェクト内のどこに置いても構いません。レイアウトコンポーネントをページと同じ場所に置くこともでき、その場合は[レイアウト名の先頭に`_`を付けます](/ja/guides/routing/#ページの除外)。 ## レイアウトのサンプル diff --git a/src/content/docs/ja/guides/data-fetching.mdx b/src/content/docs/ja/guides/data-fetching.mdx index 3189b3f2ab468..97ecc64b50315 100644 --- a/src/content/docs/ja/guides/data-fetching.mdx +++ b/src/content/docs/ja/guides/data-fetching.mdx @@ -100,7 +100,7 @@ const { film } = json.data; ## ヘッドレスCMSからの取得 -Astroコンポーネントは、お好みのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。[動的ルート](/ja/guides/routing/#dynamic-routes)を使えば、CMSのコンテンツをもとにページを生成することも可能です。 +Astroコンポーネントは、お好みのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。[動的ルート](/ja/guides/routing/#動的ルーティング)を使えば、CMSのコンテンツをもとにページを生成することも可能です。 Storyblok、Contentful、WordPressなどのヘッドレスCMSとAstroを統合する方法の詳細については、[CMSガイド](/ja/guides/cms/)を参照してください。 diff --git a/src/content/docs/ja/guides/endpoints.mdx b/src/content/docs/ja/guides/endpoints.mdx index fbbe0953b1feb..31e68d4289ebd 100644 --- a/src/content/docs/ja/guides/endpoints.mdx +++ b/src/content/docs/ja/guides/endpoints.mdx @@ -51,7 +51,7 @@ export const GET = (async ({ params, request }) => { /* ... */ }) satisfies APIR ### `params`と動的ルーティング -エンドポイントは、ページと同じ[動的ルーティング](/ja/guides/routing/#dynamic-routes)機能をサポートしています。ファイル名を角括弧で囲んだパラメータ名にして、[`getStaticPaths()`関数](/ja/reference/routing-reference/#getstaticpaths)をエクスポートしましょう。すると、エンドポイント関数に渡される`params`プロパティを通じて、そのパラメータにアクセスできます。 +エンドポイントは、ページと同じ[動的ルーティング](/ja/guides/routing/#動的ルーティング)機能をサポートしています。ファイル名を角括弧で囲んだパラメータ名にして、[`getStaticPaths()`関数](/ja/reference/routing-reference/#getstaticpaths)をエクスポートしましょう。すると、エンドポイント関数に渡される`params`プロパティを通じて、そのパラメータにアクセスできます。 ```ts title="src/pages/api/[id].json.ts" import type { APIRoute } from "astro"; diff --git a/src/content/docs/ja/guides/middleware.mdx b/src/content/docs/ja/guides/middleware.mdx index 41bbe14cb0fb3..9b7134c431113 100644 --- a/src/content/docs/ja/guides/middleware.mdx +++ b/src/content/docs/ja/guides/middleware.mdx @@ -208,9 +208,9 @@ validation response

-`APIContext`は[`rewrite()`](/ja/reference/api-reference/#rewrite)というメソッドを公開しています。これは[Astro.rewrite](/ja/guides/routing/#rewrites)と同じように動作します。 +`APIContext`は[`rewrite()`](/ja/reference/api-reference/#rewrite)というメソッドを公開しています。これは[Astro.rewrite](/ja/guides/routing/#リライト)と同じように動作します。 -ミドルウェア内で`context.rewrite()`を使うと、訪問者を新しいページに[リダイレクト](/ja/guides/routing/#dynamic-redirects)することなく、別のページのコンテンツを表示できます。これは新しいレンダリングフェーズを引き起こし、すべてのミドルウェアが再実行されます。 +ミドルウェア内で`context.rewrite()`を使うと、訪問者を新しいページに[リダイレクト](/ja/guides/routing/#動的リダイレクト)することなく、別のページのコンテンツを表示できます。これは新しいレンダリングフェーズを引き起こし、すべてのミドルウェアが再実行されます。 ```js title="src/middleware.js" import { isLoggedIn } from "~/auth.js" diff --git a/src/content/docs/ja/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/ja/guides/migrate-to-astro/from-create-react-app.mdx index 42aea1b21b0a5..b3d76ffe608d5 100644 --- a/src/content/docs/ja/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/ja/guides/migrate-to-astro/from-create-react-app.mdx @@ -37,7 +37,7 @@ import App from '../cra-project/App.jsx'; ## CRAとAstroの類似点 - [`.astro`ファイルの構文はJSXとよく似ています](/ja/reference/astro-syntax/#astroとjsxの違い)。Astroを使うのも直感的に感じられるはずです。 -- Astroはファイルベースのルーティングを採用し、[動的ルート](/ja/guides/routing/#dynamic-routes)もファイル名で定義できます。 +- Astroはファイルベースのルーティングを採用し、[動的ルート](/ja/guides/routing/#動的ルーティング)もファイル名で定義できます。 - Astroは[コンポーネントベース](/ja/basics/astro-components/)です。マークアップ構造自体は移行前後で大きく変わりません。 - React・Preact・Solid用の[公式インテグレーション](/ja/guides/integrations-guide/react/)があり、既存のJSXコンポーネントをそのまま利用できます。ただし、これらのファイルはAstro内では`.jsx`または`.tsx`拡張子を持つ**必要**があります。 - Astroは[NPMパッケージのインストール](/ja/guides/imports/#npm-packages)をサポートしており、Reactライブラリも含まれます。多くの既存依存関係はAstroでも動作することが多いでしょう。 diff --git a/src/content/docs/ja/guides/routing.mdx b/src/content/docs/ja/guides/routing.mdx new file mode 100644 index 0000000000000..fb9d71f8586a8 --- /dev/null +++ b/src/content/docs/ja/guides/routing.mdx @@ -0,0 +1,762 @@ +--- +title: ルーティング +description: Astroのルーティングの紹介 +i18nReady: true +--- +import { FileTree } from '@astrojs/starlight/components'; +import RecipeLinks from "~/components/RecipeLinks.astro" +import Since from '~/components/Since.astro' +import ReadMore from '~/components/ReadMore.astro' + +Astroは**ファイルベースルーティング**を使用して、プロジェクトの`src/pages/`ディレクトリのファイルレイアウトを元にビルドURLを生成します。 + +## ページ間の移動 + +Astroでは、ルート間の移動に標準的なHTMLの[``要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)を使用します。フレームワーク固有の``コンポーネントは提供されていません。 + +```astro title="src/pages/index.astro" +

Astroの概要についてもっと読む！

+ + +

リファレンスセクションでもっと学びましょう！

+``` + +## 静的ルーティング + +`src/pages/`ディレクトリにある`.astro`[ページコンポーネント](/ja/basics/astro-pages/)、MarkdownとMDXファイル（`.md`、`.mdx`）は、**自動的にウェブサイトのページとなります**。各ページのルートは、`src/pages/`ディレクトリ内における自身のパスとファイル名に対応します。 + +```diff +# 静的ルーティングの例 +src/pages/index.astro -> mysite.com/ +src/pages/about.astro -> mysite.com/about +src/pages/about/index.astro -> mysite.com/about +src/pages/about/me.astro -> mysite.com/about/me +src/pages/posts/1.md -> mysite.com/posts/1 +``` + +:::tip +Astroのプロジェクトでは、別途「ルーティング設定」を管理する必要はありません。`src/pages/`ディレクトリにファイルを配置すると、新しいルートが自動的に作成されます。静的ビルドでは、[`build.format`](/ja/reference/configuration-reference/#buildformat)設定オプションを使用してファイルの出力形式をカスタマイズできます。 +::: + + +## 動的ルーティング + +Astroページファイルのファイル名に動的ルートパラメータを指定すると、ファイルにマッチするページを複数生成できます。たとえば`src/pages/authors/[author].astro`は、ブログの各著者に対してプロフィールページを生成します。`author`は、ページ内からアクセス可能な*パラメータ*となります。 + +Astroのデフォルトの静的出力モードでは、これらのページはビルド時に生成されるため、`author`と対応するファイルを取得する場合、それらのリストを事前に決めておく必要があります。SSRモードでは、ルートにマッチしたリクエストに応じてページが生成されます。 + +### 静的（SSG）モード + +すべてのルートをビルド時に決める必要があるため、動的ルートは`getStaticPaths()`をエクスポートし、そこで`params`プロパティをもつオブジェクトの配列を返す必要があります。各オブジェクトは対応するルートを生成します。 + +`[dog].astro`はファイル名に動的な`dog`パラメータが定義されているため、`getStaticPaths()`から返されるオブジェクトの`params`には`dog`を含める必要があります。`Astro.params`を使用してページからこのパラメータにアクセスできます。 + +```astro title="src/pages/dogs/[dog].astro" +--- +export function getStaticPaths() { + return [ + {params: {dog: 'clifford'}}, + {params: {dog: 'rover'}}, + {params: {dog: 'spot'}}, + ]; +} + +const { dog } = Astro.params; +--- +
いい子だ、{dog}！
+``` + +上のコードにより、`/dogs/clifford`、`/dogs/rover`、`/dogs/spot`という3つのページが生成され、各ページでは対応する犬の名前が表示されます。 + +ファイル名には複数のパラメータを含められますが、これらをすべて`getStaticPaths()`の`params`オブジェクトに含める必要があります。 + +```astro title="src/pages/[lang]-[version]/info.astro" +--- +export function getStaticPaths () { + return [ + {params: {lang: 'en', version: 'v1'}}, + {params: {lang: 'fr', version: 'v2'}}, + ]; +} + +const { lang, version } = Astro.params; +--- +... +``` + +上のコードは`/en-v1/info`と`/fr-v2/info`を生成します。 + +パラメータはパス内の異なる部分に設定できます。たとえば、上と同じ`getStaticPaths()`をもつ`src/pages/[lang]/[version]/info.astro`ファイルは、`/en/v1/info`と`/fr/v2/info`のルートを生成します。 + +#### `params`のデコード + +`getStaticPaths()`関数が返す`params`はデコードされません。パラメータ値をデコードする必要がある場合は、[`decodeURI()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/decodeURI)を使用してください。 + +```astro title="src/pages/[slug].astro" +--- +export function getStaticPaths() { + return [ + { params: { slug: decodeURI("%5Bpage%5D") }}, // "[page]"にデコードされます + ] +} +--- +``` + +[`getStaticPaths`](/ja/reference/routing-reference/#getstaticpaths)についてもっと詳しく見る。 + + + +#### レストパラメーター + +より柔軟なURLルーティングが必要な場合は、`.astro`ファイル名に[レストパラメータ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)（`[...path]`）を使用することで、任意の深さのファイルパスにマッチさせられます。 + +```astro title="src/pages/sequences/[...path].astro" +--- +export function getStaticPaths() { + return [ + {params: {path: 'one/two/three'}}, + {params: {path: 'four'}}, + {params: {path: undefined }} + ] +} + +const { path } = Astro.params; +--- +... +``` + +上のコードは`/sequences/one/two/three`、`/sequences/four`、`/sequences`を生成します。（レストパラメータを`undefined`に設定することで、トップレベルのページにマッチさせられます。） + +レストパラメータは**他の名前付きパラメータ**と組み合わせて使用できます。たとえば、GitHubのファイルビューアは以下の動的ルートで表現できます。 + +``` +/[org]/[repo]/tree/[branch]/[...file] +``` + +この例では、`/withastro/astro/tree/main/docs/public/favicon.svg`へのリクエストは、以下の名前付きパラメータへと分割されます。 + +```js +{ + org: 'withastro', + repo: 'astro', + branch: 'main', + file: 'docs/public/favicon.svg' +} +``` + +#### 複数レベルの動的ページの例 + +以下の例は、レストパラメータ（`[...slug]`）と`getStaticPaths()`の[`props`](/ja/reference/routing-reference/#data-passing-with-props)機能を使用して、異なる深さのスラグに対してページを生成します。 + +```astro title="src/pages/[...slug].astro" +--- +export async function getStaticPaths() { + const pages = [ + { + slug: undefined, + title: "Astroストア", + text: "Astroにようこそ！", + }, + { + slug: "products", + title: "Astroグッズ", + text: "たくさんの商品があります", + }, + { + slug: "products/astro-handbook", + title: "究極のAstroハンドブック", + text: "Astroについて学びたければ、この本を読む必要があります", + }, + ]; + return pages.map(({ slug, title, text }) => { + return { + params: { slug }, + props: { title, text }, + }; + }); +} + +const { title, text } = Astro.props; +--- + + + {title} + + +

{title}

+

{text}

+ + +``` + +### オンデマンド動的ルート + +[オンデマンドレンダリング](/ja/guides/on-demand-rendering/)でも、動的ルートの定義方法は同じです。ファイル名に`[param]`や`[...path]`などのブラケット表記を付ければ、任意の文字列やパスにマッチさせられます。ただし、これらのルートはビルド時に生成されないため、一致するURLへのリクエストごとにページが配信されます。静的ルートではないため、`getStaticPaths()`は使用しません。 + +オンデマンドレンダリング用のルートでは、スプレッド構文（`[...param]`）によるレストパラメータはファイル名につき**1つ**だけ指定できます。たとえば`src/pages/[locale]/[...slug].astro`や`src/pages/[...locale]/[slug].astro`は許可されますが、`src/pages/[...locale]/[...slug].astro`は許可されません。 + +```astro title="src/pages/resources/[resource]/[id].astro" +--- +export const prerender = false; // 'server'モードでは不要 +const { resource, id } = Astro.params; +--- +

{resource}: {id}

+``` + +このページは、`resources/users/1`や`resources/colors/blue`など、任意の`resource`と`id`に対して提供されます。 + +#### `[...slug]`の例をSSR用に変更する + +SSRページでは`getStaticPaths()`を使用できないため、propsを受け取れません。しかし、オブジェクト内の`slug`パラメータの値を参照することで、[前の例](#複数レベルの動的ページの例)をSSRモードにも対応させられます。ルーティングが"/"の場合、`slug`パラメータは`undefined`になります。以下の例では値がオブジェクトに存在しない場合は、404ページにリダイレクトしています。 + +```astro title="src/pages/[...slug].astro" +--- +const pages = [ + { + slug: undefined, + title: "Astroストア", + text: "Astroにようこそ！", + }, + { + slug: "products", + title: "Astroグッズ", + text: "たくさんの商品があります", + }, + { + slug: "products/astro-handbook", + title: "究極のAstroハンドブック", + text: "Astroについて学びたければ、この本を読む必要があります", + }, +]; + +const { slug } = Astro.params; +const page = pages.find((page) => page.slug === slug); +if (!page) return Astro.redirect("/404"); +const { title, text } = page; +--- + + + {title} + + +

{title}

+

{text}

+ + +``` + +## リダイレクト + +読者を新しいページにリダイレクトしなければならない場合があります。サイトの構造が変更されたために永久的にリダイレクトする必要がある場合や、認証されたルートにログインするといったアクションに応じておこなう場合などです。 + +Astroの設定で、[永久的に移動したページにユーザーをリダイレクト](#リダイレクトの設定)するルールを定義できます。また、ユーザーがサイトを利用した際に[動的にリダイレクト](#動的リダイレクト)することもできます。 + +### リダイレクトの設定 + +

+ +`redirects`値を使用して、Astroの設定から永久的なリダイレクトのマッピングを指定できます。 + +サイト内のリダイレクトを定義する場合、これは古いルートから新しいルートへのマッピングとなります。Astro v5.2.0以降では、`http`または`https`で始まる[解析可能](https://developer.mozilla.org/ja/docs/Web/API/URL/canParse_static)な外部URLへのリダイレクトも可能です。 + +```js title="astro.config.mjs" {4-7} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + redirects: { + '/old-page': '/new-page', + '/blog': 'https://example.com/blog' + } +}); +``` + +これらのリダイレクトは[ファイルベースのルーティングと同じ優先順位ルール](#ルーティングの優先順位)に従い、プロジェクト内に同じ名前の既存のページファイルがある場合は常に優先順位が低くなります。たとえば、プロジェクトに`src/pages/old-page.astro`ファイルが含まれている場合、`/old-page`は`/new-page`にリダイレクトされません。 + +新旧両方のルートに同じパラメータが含まれていれば、たとえば次のように動的ルートも指定できます。 + +```js +{ + "/blog/[...slug]": "/articles/[...slug]" +} +``` + +SSRまたは静的アダプターを使用するとオブジェクトを値として設定でき、そこで`status`コードや新しい`destination`を指定できます。 + +```js title="astro.config.mjs" {5-8} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + redirects: { + '/old-page': { + status: 302, + destination: '/new-page' + }, + '/news': { + status: 302, + destination: 'https://example.com/news' + } + } +}); +``` + +`astro build`の実行時に、Astroはデフォルトで[meta refresh](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta#examples)タグを含むHTMLファイルを出力します。サポートされているアダプターの場合は、代わりにホストの設定ファイルにリダイレクトを含めて出力します。 + +ステータスコードはデフォルトで`301`です。HTMLファイルをビルドする場合、ステータスコードはサーバーによって使用されません。 + +### 動的リダイレクト + +`Astro`グローバルの`Astro.redirect`メソッドを使用すると、別のページに動的にリダイレクトできます。たとえばクッキーからセッションを取得してユーザーのログイン状態を確認した後などにこれをおこないます。 + +```astro title="src/pages/account.astro" {8} +--- +import { isLoggedIn } from '../utils'; + +const cookie = Astro.request.headers.get('cookie'); + +// ユーザーがログインしていない場合は、ログインページにリダイレクトします +if (!isLoggedIn(cookie)) { + return Astro.redirect('/login'); +} +--- +``` + +Astroはオンデマンドレンダリングで[HTMLストリーミング](/ja/guides/on-demand-rendering/#htmlストリーミング)を使用するため、リダイレクトは子コンポーネント内ではなく、ページレベルで実行する必要があります。 + +## リライト + +

+ +リライトを使用すると、ブラウザを別ページへリダイレクトせずに別のURLパスの内容を提供できます。アドレスバーには元のURLが表示されたままですが、実際には[`Astro.rewrite()`](/ja/reference/api-reference/#rewrite)で指定したページが表示されます。 + +:::tip +永続的に移動したコンテンツや、ユーザーを異なるページに誘導したい場合（ログイン後のユーザーダッシュボードなど）には、代わりに[リダイレクト](#リダイレクト)を使用してください。 +::: + +リライトは、複数のパスで同じコンテンツを表示する場合（例：`/products/shoes/men/`と`/products/men/shoes/`）に便利で、2つの異なるソースファイルを別々にメンテナンスする必要がなくなります。 + +リライトはSEOとユーザー体験の両面で有効です。リダイレクトせずに済むケースや、本来404を返すURLでもコンテンツを表示できます。リライトの一般的な使用例は、言語の異なるバリアントに対して同じローカライズされたコンテンツを表示することです。 + +次の例では、`/es-CU/`（キューバスペイン語）にアクセスするとリライトにより`/es/`バージョンのページを表示します。`/es-cu/articles/introduction`へのリクエストでは、`src/pages/es/articles/introduction.astro`のコンテンツが表示されます。 + +```astro title="src/pages/es-cu/articles/introduction.astro" +--- +return Astro.rewrite("/es/articles/introduction"); +--- +``` + +エンドポイントファイルで`context.rewrite()`を使用して、別のページにルーティングできます。 + +```js title="src/pages/api.js" +export function GET(context) { + if (!context.locals.allowed) { + return context.rewrite("/"); + } +} +``` + +`Astro.rewrite()`に渡されたURLが実行時エラーを発生させる場合、Astroは開発環境ではオーバーレイエラーを表示し、本番環境では500ステータスコードを返します。URLがプロジェクトに存在しない場合は、404ステータスコードが返されます。 + +意図的にリライトを使って`/404`ページをレンダリングすることもできます。例えば、eコマースショップの商品が利用できなくなったことを示す場合、以下のようにHTTPレスポンスステータスに基づいて条件付きでリライトできます。 + +```astro title="src/pages/[item].astro" +--- +const { item } = Astro.params; + +if (!itemExists(item)) { + return Astro.rewrite("/404"); +} +--- +``` + +また、例えば存在しないURLにアクセスした際にサイトの特定のページを表示する場合は、以下のようにパスを指定できます。 + +```js title="src/middleware.mjs" +export const onRequest = async (context, next) => { + const response = await next(); + if (response.status === 404) { + return context.rewrite("/"); + } + return response; +} +``` + +指定されたリライトパスからコンテンツを表示する前に、`Astro.rewrite()`関数は新しい完全なレンダリングフェーズをトリガーします。これにより、新しいルーティング/リクエストに対するミドルウェアが再実行されます。 + +[`Astro.rewrite()`APIリファレンス](/ja/reference/api-reference/#rewrite)についてもっと詳しく見る。 + +## ルーティングの優先順位 + +複数のルートが同じURLパスをビルドする可能性があります。たとえば、以下のルートはすべて`/posts/create`をビルドできます。 + + +- src/pages/ + - [...slug].astro + - posts/ + - create.astro + - [page].astro + - [pid].ts + - [...slug].astro + + +Astroは、ページをビルドするためにどのルートを使用すべきかを知る必要があります。そのために、以下のルールを順に適用してルートの順番を決定します。 + +- Astroの[予約ルート](#予約ルート) +- より多くのパスセグメントを持つルートが、詳細度が低いルートよりも優先される。上の例では、`/posts/`配下のすべてのルートが、`/[...slug].astro`よりも優先される。 +- パスパラメータを持たない静的ルートは、動的ルートより優先される。例えば、`/posts/create.astro`は、他のすべてのルートよりも優先される。 +- 名前付きパラメータを使用する動的ルーティングは、レストパラメータよりも優先される。例えば、`/posts/[page].astro`は`/posts/[...slug].astro`よりも優先される。 +- 事前レンダリングされた動的ルートは、サーバーの動的ルートよりも優先される。 +- エンドポイントはページよりも優先される。 +- ファイルベースのルートはリダイレクトよりも優先される。 +- ルートを上記のルールで解決できない場合、Nodeのデフォルトロケールに基づいてアルファベット順に解決される。 + +上記のようにファイルが配置されている場合に、リクエストされたURLと、HTMLをビルドするために使用されるルートがどのようにマッチングされるかの例をいくつか見てみましょう。 + +- `pages/posts/create.astro` - `/posts/create`だけをビルドします +- `pages/posts/[pid].ts` - `/posts/abc`、`/posts/xyz`などをビルドします。しかし、`/posts/create`はビルドしません +- `pages/posts/[page].astro` - `/posts/1`、`/posts/2`などをビルドします。しかし、`/posts/create`、`/posts/abc`、`/posts/xyz`はビルドしません +- `pages/posts/[...slug].astro` - `/posts/1/2`、`/posts/a/b/c`などをビルドします。しかし、`/posts/create`、`/posts/1`、`/posts/abc`などはビルドしません +- `pages/[...slug].astro` - `/abc`、`/xyz`、`/abc/xyz`などをビルドします。しかし、`/posts/create`、`/posts/1`、`/posts/abc`などはビルドしません + +### 予約ルート + +内部ルートは、Astroの機能を正しく動作させるため、ユーザー定義またはインテグレーション定義のルートよりも優先されます。以下はAstroの予約ルートです。 + +- `_astro/`：CSS文書、バンドルされたクライアントスクリプト、最適化された画像、およびその他のViteアセットなど、すべての静的アセットをクライアントに提供します。 +- `_server_islands/`：[サーバーアイランド](/ja/guides/server-islands/)で遅延実行される動的コンポーネントを提供します。 +- `_actions/`：定義された[アクション](/ja/guides/actions/)を提供します。 + +## ページネーション + +Astroは、複数のページに分割する必要がある大規模なデータコレクションのために、ページネーションを組み込みでサポートしています。Astroは、前ページと次ページのURL、総ページ数など、一般的なページネーションプロパティを生成します。 + +ページネーションされるルート名には、標準的な動的ルートと同じ`[ブラケット]`構文を使用する必要があります。たとえば、ファイル名`/astronauts/[page].astro`は`/astronauts/1`、`/astronauts/2`などのルートを生成し、`[page]`は生成されるページ番号となります。 + +`paginate()`関数を使用すると、次のように値の配列に対してこれらのページを生成できます。 + +```astro title="src/pages/astronauts/[page].astro" /{ (paginate) }/ /paginate\\(.*\\);/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/ +--- +import type { GetStaticPaths } from "astro"; + +export const getStaticPaths = (({ paginate }) => { + const astronautPages = [ + { astronaut: "ニール・アームストロング" }, + { astronaut: "バズ・オルドリン" }, + { astronaut: "サリー・ライド" }, + { astronaut: "ジョン・グレン" }, + ]; + + // 宇宙飛行士の配列から、1ページに2人ずつ入るようにページを生成します + return paginate(astronautPages, { pageSize: 2 }); +}) satisfies GetStaticPaths; + +// ページネーションされたデータは、すべて"page"プロパティとして渡されます +const { page } = Astro.props; +--- + + +

ページ {page.currentPage}

+ +``` + +これで、1ページに2つのアイテムが配置された、以下のページが生成されます。 +- `/astronauts/1` - 1ページ目には「ニール・アームストロング」と「バズ・オルドリン」を表示します +- `/astronauts/2` - 2ページ目には「サリー・ライド」と「ジョン・グレン」を表示します + + +### `page`プロパティ + +`paginate()`関数を使用すると、各ページのデータは`page`プロパティで渡されます。`page`プロパティは多くの便利なプロパティを持っています。 + +```ts +interface Page { + /** paginate() 関数に渡されたページのデータを含む配列 */ + data: T[]; + /** メタデータ */ + /** 0から始まる、ページ上の最初のアイテムのインデックス */ + start: number; + /** 0から始まる、ページ上の最後のアイテムのインデックス */ + end: number; + /** 結果の総数 */ + total: number; + /** 1から始まる、現在のページ番号 */ + currentPage: number; + /** 1ページあたりのアイテム数（デフォルトは10） */ + size: number; + /** 最終ページ番号 */ + lastPage: number; + url: { + /** 現在のページのURL */ + current: string; + /** 前のページのURL（もしあれば） */ + prev: string | undefined; + /** 次のページのURL（もしあれば） */ + next: string | undefined; + /** 最初のページのURL（現在のページが最初のページでない場合） */ + first: string | undefined; + /** 最後のページのURL（現在のページが最後のページでない場合） */ + last: string | undefined; + }; +} +``` + +以下の例では、ページの現在の情報とページ間を移動するためのリンクを表示しています。 + +```astro /(?<=const.*)(page)/ /page\\.[a-zA-Z]+(?:\\.(?:prev|next|first|last))?/ +--- +// src/pages/astronauts/[page].astro +import type { GetStaticPaths } from "astro"; + +// 前の例と同じように、{ astronaut } オブジェクトのリストをページネーションします +export const getStaticPaths = (({ paginate }) => { /* ... */}) satisfies GetStaticPaths; + +const { page } = Astro.props; +--- +

{page.currentPage}ページ

+ +{page.url.first ? 最初 : null} +{page.url.prev ? 前へ : null} +{page.url.next ? 次へ : null} +{page.url.last ? 最後 : null} +``` + +[ページネーションの`page`](/ja/reference/routing-reference/#the-pagination-page-prop)についてもっと学ぶ。 + +### ネストされたページネーション + +ページネーションのより高度なユースケースは**ネストされたページネーション**です。これは、ページネーションを他の動的ルーティングパラメータと組み合わせたものです。ネストされたページネーションを使用すると、ページネーションされたコレクションを何らかのプロパティやタグでグループ化できます。 + +たとえば、ページネーションされたMarkdownの投稿を何らかのタグでグループ化したい場合、以下のURLにマッチする`/src/pages/[tag]/[page].astro`ページを作成してネストされたページネーションを使用します。 + +- `/red/1` (tag=red) +- `/red/2` (tag=red) +- `/blue/1` (tag=blue) +- `/green/1` (tag=green) + +ネストされたページネーションは、`paginate()`の結果をグループごとに配列として`getStaticPaths()`から返すことで動作します。 + +以下の例では、上記のURLを作成するために、ネストされたページネーションを実装しています。 + +```astro title="src/pages/[tag]/[page].astro" /(?:[(]|=== )(tag)/ "params: { tag }," /const [{ ]*(page|params)/ +--- +import type { GetStaticPaths } from "astro"; + +export const getStaticPaths = (({ paginate }) => { + const allTags = ["red", "blue", "green"]; + const allPosts = Object.values( + import.meta.glob("../pages/post/*.md", { eager: true }), + ); + // すべてのタグに対して、`paginate()`の結果を返します。 + // その結果がどのタググループに対するものかをAstroに伝えるため、 + // 必ず`{ params: { tag } }`を`paginate()`に渡してください。 + return allTags.flatMap((tag) => { + const filteredPosts = allPosts.filter( + (post: any) => post.frontmatter.tag === tag, + ); + return paginate(filteredPosts, { + params: { tag }, + pageSize: 10, + }); + }); +}) satisfies GetStaticPaths; + +const { page } = Astro.props; +const params = Astro.params; +--- +``` + +## ページの除外 + +アンダースコア（`_`）を接頭辞としてファイル名に付けることで、ページやディレクトリをビルドから除外できます。アンダースコアで始まるファイルはルーターによって認識されず、`dist/`ディレクトリにも配置されません。 + +これを使用すると、一時的にページを無効にしたり、テストやユーティリティ、コンポーネントを関連するページと同じフォルダーに配置したりできます。 + +以下の例では、`src/pages/index.astro`と`src/pages/projects/project1.md`のみがページルートとHTMLファイルとしてビルドされます。 + + +- src/pages/ + - _hidden-directory/ + - page1.md + - page2.md + - _hidden-page.astro + - **index.astro** + - projects/ + - _SomeComponent.astro + - _utils.js + - **project1.md** + + +## 高度なルーティング + +

+ +デフォルトでは、Astroは組み込みパイプラインを使用してすべてのリクエストを処理します。このパイプラインでは、末尾のスラッシュの正規化、リダイレクト、セッション、アクション、ユーザーミドルウェア、ページのレンダリング、i18n、キャッシュの順にハンドラーが実行されます。一般的なルーティングやリクエスト処理のユースケースに対応するよう設計されていますが、すべてのプロジェクトに適しているとは限りません。 + +Astroの高度なルーティングを使用すると、このパイプラインを独自のものに置き換えられます。使用する組み込み機能とその実行位置を選択でき、パイプライン内の任意の場所に独自のロジックも追加できます。これにより、Astroが受信したリクエストを処理する方法を完全に制御できます。 + +### カスタムエントリーポイントを作成する + +デフォルトのパイプラインが要件に合わない場合は、`fetch()`メソッドをもつオブジェクトをデフォルトエクスポートする`src/fetch.ts`ファイルを作成して上書きできます。このメソッドは標準の[Request](https://developer.mozilla.org/ja/docs/Web/API/Request)を受け取り、[Response](https://developer.mozilla.org/ja/docs/Web/API/Response)を返す必要があります。 + +```ts title="src/fetch.ts" +import type { Fetchable } from 'astro'; + +export default { + async fetch(request) { + // 独自のリクエスト処理ロジックをここに記述します + return new Response("高度なルーティングからこんにちは！"); + } +} satisfies Fetchable; +``` + +Astroの高度なルーティングのエントリーポイントでは、`.ts`、`.js`、`.mjs`、`.mts`のファイル形式を使用できます。ほとんどの場合は`.js`を、TypeScriptのサポートが必要な場合は`.ts`を使用することをおすすめします。 + +### エントリーポイントのファイル名を変更する + +デフォルトでは、Astroは高度なルーティングのエントリーポイントとして`src/fetch.ts`を探します。ファイル名を変更するには、Astro設定ファイルで[`fetchFile`](/ja/reference/configuration-reference/#fetchfile)オプションを設定します。 + +以下の例では、Astroに`src/fetch.ts`ではなく`src/handler.ts`を探すよう指定します。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + fetchFile: 'handler', +}); +``` + +エントリーポイントを完全に無効にするには、`fetchFile`を`null`に設定します。これは、別の目的で`src/fetch.ts`ファイルをすでに使用している場合に便利です。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + fetchFile: null, +}); +``` + +### 独自のロジックを追加する + +高度なルーティングの主な利点は、リクエストパイプラインに独自のロジックを挿入できることです。Astroがリクエストを処理する前、パイプラインのステージ間、またはレスポンスの生成後にコードを実行できます。 + +これには2つの方法があります。 + +- [`astro()`ハンドラー](/ja/reference/modules/astro-fetch/#astro)を使用して組み込みパイプライン全体を実行し、その前後にロジックを追加します。 +- [`astro/fetch`](/ja/reference/modules/astro-fetch/)または[`astro/hono`](/ja/reference/modules/astro-hono/)の個別のハンドラーを組み合わせ、実行順序をより細かく制御します。 + +#### `astro()`でパイプライン全体を実行する + +Astroの組み込みルーティングの動作を維持しながら、その前後に独自のロジックを追加するには、[`astro()`](/ja/reference/modules/astro-fetch/#astro)を使用します。この方法ではデフォルトのパイプライン順序を維持しつつ、前処理と後処理を1か所に追加できます。リクエストのログ記録やカスタムヘッダーの追加など、多くのユースケースでは`astro()`だけで十分です。 + +以下の例では、Astroのパイプラインを実行する前に受信した各リクエストをログへ記録し、Astroの処理完了後にレスポンスへカスタムヘッダーを追加します。 + +```ts title="src/fetch.ts" +import { FetchState, astro } from 'astro/fetch'; + +export default { + async fetch(request: Request): Promise { + const state = new FetchState(request); + + // Astroのハンドラーを実行する前の独自の前処理 + console.log(`${request.method} ${new URL(request.url).pathname}`); + + const response = await astro(state); + + // Astroのレンダリング後に実行する独自の後処理 + response.headers.set('X-Powered-By', 'Astro'); + return response; + }, +}; +``` + +:::caution +受信したリクエストのパス名と、Astroが内部でマッチさせるルーティングが同じであるとは限りません。そのため、`url.pathname.startsWith('/dashboard')`のようなチェックは回避される可能性があります。 + +リクエストのパス名を文字列と比較する前処理を、リクエストの認可に使用しないでください。ルーティングを保護するには、[Hono](#honoとともに使用する)など、ルーティングのマッチングを担うルーターを使用してください。 +::: + +#### 個別のハンドラーを組み合わせる + +パイプラインの実行順序をより細かく制御したり、一部の機能を省略したりする場合は、[`astro/fetch`](/ja/reference/modules/astro-fetch/)の個別のハンドラー関数を組み合わせられます。各ハンドラーは、マッチしたルーティング、Cookie、セッションなど、リクエストごとのデータを追跡する[`FetchState`オブジェクト](/ja/reference/modules/astro-fetch/#fetchstate)を操作します。ハンドラーは任意の順序で呼び出せ、その間に独自のロジックを挿入できます。 + +以下の例では、プロジェクトで使用するハンドラーだけを実行し、アクションの後かつページのレンダリング前に独自のロジックを追加します。 + +```ts title="src/fetch.ts" +import { + FetchState, + actions, + middleware, + pages, + i18n, +} from 'astro/fetch'; + +export default { + async fetch(request: Request): Promise { + const state = new FetchState(request); + + const actionResponse = await actions(state); + if (actionResponse) return actionResponse; + + // アクションとページレンダリングの間に実行する独自のロジック + console.log(`Rendering ${new URL(request.url).pathname}`); + + const response = await middleware(state, (s) => pages(s)); + return i18n(state, response); + }, +}; +``` + +### Honoとともに使用する + +Astroは、[`astro/hono`](/ja/reference/modules/astro-hono/)を介して、すべてのハンドラー関数にHono互換のラッパーも提供します。ルーティングフレームワークとして[Hono](https://hono.dev/)を使用する場合は、`src/fetch.ts`からHonoアプリをエクスポートできます。 + +```ts title="src/fetch.ts" +import { Hono } from 'hono'; +import { logger } from 'hono/logger'; +import { actions, middleware, pages, i18n } from 'astro/hono'; + +const app = new Hono(); + +// Honoミドルウェア +app.use(logger()); + +// Astroのハンドラー（Honoミドルウェアとして使用） +app.use(actions()); +app.use(middleware()); +app.use(pages()); +app.use(i18n()); + +export default app; +``` + +保護したいHonoのルーティングに認可チェックを登録することもできます。 + +```ts title="src/fetch.ts" +import { Hono } from 'hono'; +import { actions, middleware, pages, i18n } from 'astro/hono'; +import { isLoggedIn } from './lib/auth'; + +const app = new Hono(); + +// /dashboard配下のすべてのルーティングを保護します。 +app.use('/dashboard', requireAuth); +app.use('/dashboard/*', requireAuth); + +app.use(actions()); +app.use(middleware()); +app.use(pages()); +app.use(i18n()); + +export default app; + +async function requireAuth(c, next) { + if (!(await isLoggedIn(c.req.raw))) { + return c.redirect('/login'); + } + return next(); +} +``` diff --git a/src/content/docs/ja/guides/upgrade-to/v6.mdx b/src/content/docs/ja/guides/upgrade-to/v6.mdx index 873af13c6d911..8195fa6b2376f 100644 --- a/src/content/docs/ja/guides/upgrade-to/v6.mdx +++ b/src/content/docs/ja/guides/upgrade-to/v6.mdx @@ -262,7 +262,7 @@ export async function getStaticPaths() { --- ``` -[`getStaticPaths()`を使用して静的ルートを動的に生成する](/ja/guides/routing/#static-ssg-mode)際にアクセスできる[`import.meta.env.SITE`などの組み込み環境変数](/ja/guides/environment-variables/#デフォルト環境変数)の詳細を確認してください。 +[`getStaticPaths()`を使用して静的ルートを動的に生成する](/ja/guides/routing/#静的ssgモード)際にアクセスできる[`import.meta.env.SITE`などの組み込み環境変数](/ja/guides/environment-variables/#デフォルト環境変数)の詳細を確認してください。 ### 非推奨: `import.meta.env.ASSETS_PREFIX` @@ -1048,7 +1048,7 @@ export const server = { } ``` -[リライト](/ja/guides/routing/#rewrites)の詳細を確認してください。 +[リライト](/ja/guides/routing/#リライト)の詳細を確認してください。 ### 削除: スキーマ関数のシグネチャ（コンテンツローダーAPI） @@ -1606,7 +1606,7 @@ export function getStaticPaths() { --- ``` -[`getStaticPaths()`を使用した動的SSGルート](/ja/guides/routing/#static-ssg-mode)の詳細を確認してください。 +[`getStaticPaths()`を使用した動的SSGルート](/ja/guides/routing/#静的ssgモード)の詳細を確認してください。 ### 変更: Vitestのクライアント環境でAstroコンポーネントをレンダリングできなくなった（コンテナAPI） diff --git a/src/content/docs/ja/guides/upgrade-to/v7.mdx b/src/content/docs/ja/guides/upgrade-to/v7.mdx index 171fa96dab871..88d45ff2c8943 100644 --- a/src/content/docs/ja/guides/upgrade-to/v7.mdx +++ b/src/content/docs/ja/guides/upgrade-to/v7.mdx @@ -119,7 +119,7 @@ export default defineConfig({ - `rustCompiler`: RustベースのAstroコンパイラがデフォルトかつ唯一のコンパイラとなり、従来のGoベースのコンパイラを置き換えました。プロジェクトに影響を与える可能性のある動作の変更点の詳細については、[Rustコンパイラ](#rustコンパイラ)を確認してください。 -- `advancedRouting`: 高度なルーティングがデフォルトで有効になりました。詳細については[高度なルーティングのガイド](/ja/guides/routing/#advanced-routing)を確認してください。なお、`src/fetch.ts`は[予約済みのファイル名](#予約済みのファイル名-srcfetchts)になりました。 +- `advancedRouting`: 高度なルーティングがデフォルトで有効になりました。詳細については[高度なルーティングのガイド](/ja/guides/routing/#高度なルーティング)を確認してください。なお、`src/fetch.ts`は[予約済みのファイル名](#予約済みのファイル名-srcfetchts)になりました。 - `cache`: ルートキャッシュが安定版になりました。この機能を使用していた場合は、`cache`と`routeRules`を`experimental`ブロックの外に移動するよう設定を更新してください。 @@ -185,7 +185,7 @@ Rustコンパイラは、CSSを異なる方法で処理します。これによ ### 予約済みのファイル名: `src/fetch.ts` -Astro v7.0では[高度なルーティング](/ja/guides/routing/#advanced-routing)が導入され、`src/middleware.ts`と同様に、`src/fetch.ts`（または`src/fetch.js`）が特別なファイル名として使用されるようになりました。Astroはこのファイルを自動的にインポートし、ルーティングの動作を設定します。 +Astro v7.0では[高度なルーティング](/ja/guides/routing/#高度なルーティング)が導入され、`src/middleware.ts`と同様に、`src/fetch.ts`（または`src/fetch.js`）が特別なファイル名として使用されるようになりました。Astroはこのファイルを自動的にインポートし、ルーティングの動作を設定します。 プロジェクトに別の目的で使用している`src/fetch.ts`ファイルがすでに存在する場合、Astroはそれを高度なルーティングの設定として処理しようとし、予期しないエラーが発生する可能性があります。 diff --git a/src/content/docs/ja/reference/errors/get-static-paths-invalid-route-param.mdx b/src/content/docs/ja/reference/errors/get-static-paths-invalid-route-param.mdx index 1fea8f23c8dcd..e55c64924f020 100644 --- a/src/content/docs/ja/reference/errors/get-static-paths-invalid-route-param.mdx +++ b/src/content/docs/ja/reference/errors/get-static-paths-invalid-route-param.mdx @@ -23,7 +23,7 @@ export async function getStaticPaths() { --- ``` -[レストパラメーター](/ja/guides/routing/#rest-parameters)を使用するルートでは、URLにパラメーターが渡されないパスを`undefined`により表わすことができます。 +[レストパラメーター](/ja/guides/routing/#レストパラメーター)を使用するルートでは、URLにパラメーターが渡されないパスを`undefined`により表わすことができます。 ```astro title="/route/[...id].astro" --- @@ -41,4 +41,3 @@ export async function getStaticPaths() { - [`getStaticPaths()`](/ja/reference/routing-reference/#getstaticpaths) - [`params`](/ja/reference/api-reference/#params) - diff --git a/src/content/docs/ja/reference/errors/get-static-paths-required.mdx b/src/content/docs/ja/reference/errors/get-static-paths-required.mdx index 0fed3d526eda7..c5b09f8032dda 100644 --- a/src/content/docs/ja/reference/errors/get-static-paths-required.mdx +++ b/src/content/docs/ja/reference/errors/get-static-paths-required.mdx @@ -8,11 +8,10 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/ ## 何が問題か？ -[静的モード](/ja/guides/routing/#static-ssg-mode)では、すべてのルートをビルド時に決定する必要があります。そのため動的ルートは、生成対象の各パスを返す`getStaticPaths`関数を`export`する必要があります。 +[静的モード](/ja/guides/routing/#静的ssgモード)では、すべてのルートをビルド時に決定する必要があります。そのため動的ルートは、生成対象の各パスを返す`getStaticPaths`関数を`export`する必要があります。 **以下も参照してください:** -- [動的ルーティング](/ja/guides/routing/#dynamic-routes) +- [動的ルーティング](/ja/guides/routing/#動的ルーティング) - [`getStaticPaths()`](/ja/reference/routing-reference/#getstaticpaths) - [サーバーサイドレンダリング](/ja/guides/on-demand-rendering/) - diff --git a/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx b/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx index 15d96baf18432..12a0ad9bb1e86 100644 --- a/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx +++ b/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx @@ -8,9 +8,8 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/ ## 何が問題か？ -[動的ルーティング](/ja/guides/routing/#dynamic-routes)がマッチしましたが、リクエストされたパラメーターに対応するパスが見つかりませんでした。これは多くの場合、生成されたパスまたはリクエストされたパスのどちらかにタイポがあることが原因です。 +[動的ルーティング](/ja/guides/routing/#動的ルーティング)がマッチしましたが、リクエストされたパラメーターに対応するパスが見つかりませんでした。これは多くの場合、生成されたパスまたはリクエストされたパスのどちらかにタイポがあることが原因です。 **以下も参照してください:** - [getStaticPaths()](/ja/reference/routing-reference/#getstaticpaths) - diff --git a/src/content/docs/ja/tutorial/5-astro-api/2.mdx b/src/content/docs/ja/tutorial/5-astro-api/2.mdx index 979b487d955d5..8a4f922d77c56 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/2.mdx @@ -328,6 +328,6 @@ const { posts } = Astro.props; ### 参考 -- [Astroにおける動的なページルーティング](/ja/guides/routing/#dynamic-routes) +- [Astroにおける動的なページルーティング](/ja/guides/routing/#動的ルーティング) - [`getStaticPaths()` APIドキュメント](/ja/reference/routing-reference/#getstaticpaths) diff --git a/src/content/docs/ja/tutorial/5-astro-api/3.mdx b/src/content/docs/ja/tutorial/5-astro-api/3.mdx index bebaf8d3d3b17..fc0f20be2a5ec 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/3.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/3.mdx @@ -434,4 +434,4 @@ const { frontmatter } = Astro.props; ### 参考 -- [Astroにおける静的ルーティング](/ja/guides/routing/#static-routes) +- [Astroにおける静的ルーティング](/ja/guides/routing/#静的ルーティング) diff --git a/src/content/docs/ja/tutorial/6-islands/4.mdx b/src/content/docs/ja/tutorial/6-islands/4.mdx index 3c16b3f805c10..f813191bdc04e 100644 --- a/src/content/docs/ja/tutorial/6-islands/4.mdx +++ b/src/content/docs/ja/tutorial/6-islands/4.mdx @@ -17,7 +17,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; import Option from '~/components/tutorial/Option.astro'; import { Steps } from '@astrojs/starlight/components'; -以上でAstroの[組み込みのファイルベースルーティング](/ja/guides/routing/#static-routes)を使ったブログができましたが、これを[コンテンツコレクション](/ja/guides/content-collections/)を使うように更新していきましょう。ブログ記事のような、似たようなコンテンツのグループを管理するうえで、コンテンツコレクションは非常に強力です。 +以上でAstroの[組み込みのファイルベースルーティング](/ja/guides/routing/#静的ルーティング)を使ったブログができましたが、これを[コンテンツコレクション](/ja/guides/content-collections/)を使うように更新していきましょう。ブログ記事のような、似たようなコンテンツのグループを管理するうえで、コンテンツコレクションは非常に強力です。 - ブログ記事のフォルダーを`src/blog/`に移動する