ページ

ページは、src/pages/サブディレクトリにあるAstroコンポーネントの特殊なタイプです。Webサイトの各HTMLページのルーティング、データロード、全体的なページレイアウトを処理する役割を担っています。

ファイルベースルーティング

Astroは、ファイルベースルーティングと呼ばれるルーティング手法を採用しています。 src/pagesディレクトリ内のすべての.astroファイルは、そのファイルパスに基づいてサイトのページ、またはエンドポイントになります。

ページ間のリンクを張るには、HTMLの<a>要素をコンポーネントテンプレートに記述してください。

📚 Astroのルーティングについて詳しくみる。

ページのHTML

Astroページは、<head> と <body> を含む完全な <html>...</html> ページレスポンスを返す必要があります。（<!doctype html> はオプションで、書かなくても自動的に追加されます）。

---
---
<html>
  <head>
    <title>ホームページ</title>
  </head>
  <body>
    <h1>私のホームページへようこそ！</h1>
  </body>
</html>

ページレイアウトの活用

すべてのページで同じHTML要素を繰り返すことを避けるために、共通の <head> と <body> 要素を独自のレイアウトコンポーネントに移動できます。レイアウトコンポーネントはいくつでも使えます。

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>レイアウトに包まれたコンテンツ！</p>
</MySiteLayout>

📚 Astroのレイアウトコンポーネントについて詳しくみる。

Markdownページ

Astroは /src/pages/ にあるMarkdown (.md) ファイルも、最終的なWebサイトのページとして扱います。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。

ページレイアウトはMarkdownファイルに対して特に有効です。Markdownファイルは特別な layoutというfront-matterプロパティを使用して、Markdownコンテンツを <html>...</html> ページドキュメントにラップするレイアウトコンポーネントを指定できます。

---
layout: '../layouts/MySiteLayout.astro'
title: 'Markdownページ'
---
# タイトル

これは**Markdown**で書かれたページです。

📚 AstroのMarkdownについて詳しくみる。

HTMLではないページ

.jsonや.xmlなどのHTMLではないページや、画像などのアセットも、一般的にファイルルートと呼ばれるAPIルートで構築できます。

ファイルルートは、拡張子が .js または .ts であるスクリプトファイルで、src/pages/ ディレクトリに配置されたものです。

ビルドされるファイル名と拡張子はソースファイルの名前に基づいています。たとえば、src/pages/data.json.ts は、最終的に /data.json のパスとマッチするようにビルドされます。

SSR（サーバーサイドレンダリング）では、拡張子は関係ないので省略できます。これは、ビルド時にファイルが生成されないためです。その代わり、Astroは1つのサーバーファイルを生成します。

// 出力先: /builtwith.json

// ファイルルートはget()関数をエクスポートし、それがファイルを生成するために呼び出されます。
// 最終的なビルドでファイルの内容を保存するために、`body` を持つオブジェクトを返します。
export async function get() {
  return {
    body: JSON.stringify({
      name: 'Astro',
      url: 'https://astro.build/',
    }),
  };
}

APIルートは、params (EN)とRequest を含む APIContext オブジェクトを受け取ります。

import type { APIContext } from 'astro';

export async function get({ params, request }: APIContext) {
  return {
    body: JSON.stringify({
      path: new URL(request.url).pathname
    })
  };
}

APIルートの関数は APIRoute 型を使って書くこともできます。これにより、APIルートが間違った型を返した場合に、より適切なエラーメッセージを表示できます。

import type { APIRoute } from 'astro';

export const get: APIRoute = ({ params, request }) => {
  return {
    body: JSON.stringify({
      path: new URL(request.url).pathname
    })
  };
};

カスタム404エラーページ

カスタムの404エラーページを作成するには、src/pagesに 404.astro または 404.md ファイルを作成します。

これは 404.html ページにビルドされます。ほとんどのデプロイサービスはこのファイルを見つけて使用します。