ひょっとしたら、デザイナーさんの方で React や Next.js を使うのが難しいと感じる人がいらっしゃるかもしれません。そんな方におすすめなのが、Astro です。React を使わずに、ネイティブな JavaScript と、html と css だけで、フロントエンド開発を行うことができます。

静的サイトジェネレータである Astro は、フロントエンド開発の新しいフレームワークで、静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)を効率的に組み合わせることが可能です。

Astro の特徴は多岐に渡りますが、特に注目すべきはそのパフォーマンスと開発者体験です。これは、Astro が「0-JS」の原則に基づいて構築されているからです。

「0-JS」の原則とは何かというと、フロントエンドで JavaScript のバンドルを全く必要としない、つまり最小限の JavaScript のみを使用するという考え方です。JavaScript が一部のユーザー体験において重要な役割を果たす一方で、過度に JavaScript を使うとウェブページのパフォーマンスやアクセシビリティに影響を及ぼす可能性があります。Astro の「0-JS」原則は、JavaScript の過度な使用を防ぐための効果的なソリューションを提供します。

Astro はまた、各種のフロントエンドフレームワーク（React、Vue.js、Svelte など）との相互運用性を提供します。これによって、開発者は自分が最も得意とする、またはプロジェクトに最適なフレームワークを自由に選択できるようになります。そして、フレームワーク間で共通のコンポーネントを共有することも可能です。

Astro のもう 1 つの重要な特徴は、完全な静的サイト生成(SSG)を提供することです。これは、ウェブページのロード時間を最小限に抑えるために非常に有効な手段です。Astro は、ビルド時に全ての HTML を生成するため、クライアント側での JavaScript の実行を最小限に抑えることができます。

華麗なるフレームワーク Astro の使い方

Astro は主に静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）を得意とするフレームワークで、フロントエンドフレームワーク（React、Vue、Svelte など）との組み合わせを用いて効率的に高パフォーマンスなウェブサイトを構築することを目的としています。この性質上、Astro は次のようなタイプのプロジェクトに特に適しています。

Astro は革新的なフレームワークであり、HTML、CSS、JavaScript のベストプラクティスを維持しながら、Web サイトのパフォーマンスを最適化します。

Astro に向いているもの

• ブログ
• ドキュメンテーション
• コーポレートサイト
• マーケティングサイト
• コンポーネントライブラリ

Astro の静的サイト生成（SSG）機能は、ブログ投稿やドキュメンテーションページなどの静的コンテンツを効率的に配信するのに最適です。また、パフォーマンスが重要な要素となるマーケティングサイトやプロダクトランディングページには、Astro が生成する高速で軽量な HTML が役立ちます。

Astro は異なるフロントエンドフレームワーク間でコンポーネントを共有できるため、UI コンポーネントライブラリの構築やドキュメンテーションに適しています。

Astro に向いていないもの

一方、Astro は以下のようなアプリケーションには向いていないかもしれません。

• 会員登録や認証を必要とするアプリケーション
• チャットアプリ

リアルタイムのチャットアプリ、複雑なインタラクティブなダッシュボードなど、大量の動的なクライアントサイド JavaScript を必要とするアプリケーションには、Astro よりも React や Vue などのフルフレームワークが向いているかもしれません。

Astro は静的な HTML を生成するのが主な目的であり、それ自体は会員登録や認証などのサーバーサイドの機能を提供していません。ただし、これらの機能はサーバーサイドの API やサードパーティの認証サービスと組み合わせて実装することは可能です。

注意点として、Astro はまだ新しいフレームワークであり、一部の機能やツールは開発中であるか、またはまだ存在していないかもしれません。ですから、特定のプロジェクトに Astro を適用する前には、必要な機能やツールが Astro で利用可能かどうかを確認することをおすすめします。

Next.js との比較

こちらは、Next.js と Astro の主な特徴を比較した表です。

これは一部の特性を抜粋した比較表であり、全ての特性を網羅しているわけではありません。各フレームワークの詳細な機能と特性については、公式ドキュメンテーションをご覧ください。

Astro の基本的な構文と使用方法

Astro の基本的な構文と使用方法について説明します。

Astro の.astroファイルは、HTML とよく似たシンタックスを使用しますが、JavaScript と他のフレームワークのコンポーネントも組み込むことができます。

まずは、単純な Astro コンポーネントの書き方から見ていきましょう。

---
// この部分は、コンポーネントが必要とするJavaScriptを記述するためのスクリプトブロックです
---
// ここから下はHTMLと同様のシンタックスでマークアップを書くことができます
<div>
    <h1>Hello, Astro!</h1>
</div>

Astro では、他のフレームワークのコンポーネント（例えば React や Vue など）をインポートして使用することができます。例えば：

---
// Reactコンポーネントをインポートします
import MyReactComponent from '../components/MyReactComponent.jsx'
---
// Astroコンポーネント内でReactコンポーネントを使用します
<MyReactComponent />

Astro のコンポーネントはプロパティを受け取ることができます。これは React や Vue のプロパティ/プロップスと同等の機能です：

---
// このコンポーネントは "name" プロパティを受け取ります
const { name } = Astro.props;
---
<h1>Hello, {name}!</h1>

そして、このコンポーネントは以下のように使用できます：

<MyAstroComponent name="Astro" />

Astro の中で JavaScript を使うときは、通常の JavaScript の構文をそのまま使うことができます。以下に Astro での変数、配列、オブジェクト、および三項演算子の使用例をお見せします。

変数:

---
let message = "Hello, Astro!";
---
<p>{message}</p>

配列:

---
let array = ['Apple', 'Banana', 'Cherry'];
---
<ul>
  {array.map(item => (
    <li>{item}</li>
  ))}
</ul>

オブジェクト:

---
let person = {
  name: "John",
  age: 25
};
---
<p>{person.name} is {person.age} years old.</p>

三項演算子:

---
let isMember = true;
---
<p>You are {isMember ? 'a member' : 'not a member'}.</p>

このように Astro はフロントエンドフレームワークに馴染みのある JavaScript の構文をサポートしています。ただし、これらの変数やオブジェクトは静的に評価されるため、動的に更新することはできません。それには、React や Vue などのフロントエンドフレームワークのコンポーネントを使うことが推奨されています。

これらは Astro の基本的な構文と使用方法の一部です。Astro は他のフレームワークと相互運用する柔軟性、スタイリングの選択肢（グローバル CSS、スコープ付き CSS、CSS-in-JS）、静的なデータの取り扱い（getStaticPaths、getStaticProps に相当する機能）、カスタムレイアウトなど、他の多くの機能も提供しています。

スロット

Astro では、スロット（slot）という機能を使用して、コンポーネントの一部をカスタマイズすることができます。これは Vue や Svelte のスロット、あるいは React の children prop に似ています。

具体的には、Astro コンポーネントの中に<slot></slot>を配置すると、そのコンポーネントが使用される際にその位置に任意のコンテンツを挿入することができます。例えば次のようなコンポーネントがあったとします：

<!-- Card.astro -->
<div class="card">
  <slot></slot>
</div>

このCardコンポーネントは以下のように使用できます：

<Card>
  <h1>Hello, Astro!</h1>
  <p>Welcome to Astro.</p>
</Card>

これをレンダリングすると、次のような HTML が生成されます：

<div class="card">
  <h1>Hello, Astro!</h1>
  <p>Welcome to Astro.</p>
</div>

このように、スロットを使用すると、コンポーネントの一部をカスタマイズすることが可能になります。

また、名前付きスロットも利用可能です。例えば以下のようなコンポーネントを考えてみましょう：

<!-- CardWithHeader.astro -->
<div class="card">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
</div>

このコンポーネントは以下のように使用することができます：

<CardWithHeader>
  <h1 slot="header">Hello, Astro!</h1>
  <p>Welcome to Astro.</p>
</CardWithHeader>

ここでは<h1>要素にslot="header"属性を指定して、その要素をヘッダースロットに割り当てています。これにより、コンポーネントの特定の部分をより具体的にカスタマイズすることが可能になります。

インストール

Astro をインストールするには、npmコマンドを使用します。あとは、Y を押していくだけです。

npm create astro@latest
Need to install the following packages:
  create-astro@3.1.5
Ok to proceed? (y) y

╭─────╮  Houston:
│ ◠ ◡ ◠  Let's build something awesome!
╰─────╯

 astro   v2.5.5 Launch sequence initiated.

   dir   Where should we create your new project?
         ./agreeable-aurora

  tmpl   How would you like to start your new project?
         Include sample files
      ✔  Template copied

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./agreeable-aurora
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯
~/projects/Astro cd agreeable-aurora
~/projects/Astro/agreeable-aurora

起動

Next.js と同じように起動します。

npm run dev

> agreeable-aurora@0.0.1 dev
> astro dev

  🚀  astro  v2.5.5 started in 46ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

build

次のコマンドでビルドできます。ビルドが完了すると、dist ディレクトリに全てのファイル（html, js, css など）が出力されます。

※ 出力された html は、綺麗に出力されるので html 納品にも使えそうですが、相対パスを少し変換するなどの処理が必要になります。

npm run build

# プレビュー
npm run preview

VSCode の設定

VSCode に対応させます。

Astro - Visual Studio Marketplace をインストールします。

次に、Prettier に対応させます。

npm install -D prettier prettier-plugin-astro

setting.json に追記します。

"prettier.documentSelectors": ["**/*.astro"], // astro 設定

プロジェクトのルートに、.prettierrc を作成します。

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 800,
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": { "parser": "astro" }
    }
  ]
}

package.json

現時点での設定は次のようになっています。

{
  "name": "agreeable-aurora",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^2.4.1",
    "postcss": "^8.4.24",
    "sass": "^1.62.1"
  },
  "devDependencies": {
    "prettier": "^2.8.8",
    "prettier-plugin-astro": "^0.9.1"
  }
}

エイリアスの設定

パスのエイリアスを設定できます。これにより、特定のディレクトリに短い名前をつけて参照することができます。

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

上のように設定すると、@componentsという名前でsrc/componentsディレクトリを参照できます。

import Breadcrumbs from '@components/Breadcrumbs.astro'

再利用可能な共通ヘッダーを作成

Astro ではコンポーネントを使って、再利用可能な共通ヘッダーを作成することができます。まず、共通ヘッダーを作成しましょう。/src/components/Header.astroという新しいファイルを作成します。

---
// Astro コンポーネントはこの範囲内に JavaScript を記述できます
// 必要に応じてロジックを追加します
---

<header>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">私たちについて</a></li>
      <li><a href="/contact">連絡先</a></li>
    </ul>
  </nav>
</header>

上記のコードはヘッダーコンポーネントを作成し、それぞれホーム、私たちについて、連絡先へのリンクを持つナビゲーションメニューを含みます。

次に、この共通ヘッダーを他の Astro ファイルから呼び出します。例えば/src/pages/index.astroから呼び出す場合、以下のようにします：

---
// 必要なコンポーネントをインポートします
import Header from '../components/Header.astro';
---

<Header />

<main>
  <h1>Welcome to our website!</h1>
  <!-- 他のコンテンツ -->
</main>

ここでは、import文を使ってヘッダーコンポーネントをインポートし、<Header />タグを使ってヘッダーを表示します。このタグはページの任意の場所に配置できます。これにより、どのページでも一貫したヘッダーを簡単に表示することができます。

Layout に、Header と Footer を追加

既存の Layout コンポーネントに Header と Footer を追加するには、それらのコンポーネントをインポートし、HTML 構造に適切な場所に追加するだけです。/src/components/Header.astroと/src/components/Footer.astroが Header と Footer のコンポーネントの場所であると仮定します。以下にその方法をお見せします。

---
export interface Props {
  title: string
}

import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'

const { title } = Astro.props
import '../../styles/reset.min.css'
import '../../styles/style.scss'
---

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <Header />
    <slot />
    <Footer />
  </body>
</html>
<style is:global>
  :root {
    --accent: 124, 58, 237;
    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
  }
  html {
    font-family: system-ui, sans-serif;
    background-color: #f6f6f6;
  }
</style>
<style lang="scss">
  p {
    color: red;
  }
</style>

これで、Header と Footer コンポーネントが Layout コンポーネントに追加されました。それぞれが適切な場所（body の最初と最後）に配置されています。これにより、すべてのページに共通のヘッダーとフッターが表示されます。

なお、Astro ファイルの相対パスが正しいことを確認してください。上記のコードでは、../components/Header.astroと../components/Footer.astroが Header と Footer の Astro ファイルのパスとして仮定されています。ファイルの実際の場所に応じて、これらのパスを適宜調整してください。

Google Fonts を設定する

@fontsourceは、Google Fonts と同様にさまざまなフォントを提供するパッケージ群です。Google Fonts と違い、これらのパッケージは npm や yarn を通じてインストールしてローカルにホストすることができます。

あなたがNoto Serif JPを使用したい場合、まずは該当のパッケージをインストールする必要があります。以下のコマンドでそれを行うことができます。

npm install @fontsource/noto-serif-jp

または

yarn add @fontsource/noto-serif-jp

インストールした後は、必要なスタイルシートを CSS や SCSS ファイルでインポートします。たとえば、グローバルスタイルシートglobal.cssでインポートする場合は以下のようになります：

@import '@fontsource/noto-serif-jp';

もしくは、特定の Astro コンポーネントでインポートすることも可能です：

---
import '@fontsource/noto-serif-jp/index.css';
---

<!-- Astro component markup here -->

その後、CSS でこのフォントを使用するために、適切なfont-familyを指定します：

body {
  font-family: 'Noto Serif JP', serif;
}

このようにして@fontsourceを使うと、サーバーからフォントをダウンロードする必要がないため、ロード時間が短縮されることがあります。しかし、@fontsourceには全ての Google Fonts が含まれていないため、使用したいフォントが@fontsourceに含まれているか事前に確認することが重要です。

ダミー画像

Astro を使用してダミー画像を追加するのは簡単です。次はその方法です。

まず、画像ファイルをプロジェクトに追加します。例えば/public/images/dummy.jpgというパスにダミー画像ファイルが存在するとします。

次に、Astro ファイル内で<img>タグを使用してこの画像を表示します。例えば、/src/pages/index.astroファイルで画像を表示するには以下のようにします：

---
import Layout from '../components/Layout.astro';
---

<Layout>
  <h1>Welcome to our website!</h1>
  <img src="/images/dummy.jpg" alt="ダミー画像" />
</Layout>

ここでは、<img>タグのsrc属性に画像ファイルへのパスを指定して画像を表示しています。alt属性は画像の代替テキストを提供し、視覚障害のあるユーザーや画像が読み込めない場合に役立ちます。

なお、Astro ではpublicディレクトリが公開ディレクトリとして扱われ、その中にあるファイルは URL のルート（/）から直接アクセスできます。このため、public/images/dummy.jpgの画像は/images/dummy.jpgという URL でアクセスできます。

また、もし外部のダミー画像を使用したい場合、例えば Placeholder.com などのサービスを利用できます。以下にその例をお見せします。

<img src="https://via.placeholder.com/150" alt="Placeholder Image" />

このように、外部の URL を指定すれば自分で画像を用意する必要はありません。ただし、常にインターネット接続が必要で、外部サービスの可用性に依存することに注意してください。

Images コンポーネント

Astro の<Image />コンポーネントは、最適化された画像をレンダリングするためのものです。このコンポーネントを使うことで、画像の幅、高さ、アスペクト比を指定したり、画像を特定の出力形式に変換することができます。

Astro の<Image />コンポーネントの使い方は、画像のソースがリモートかローカルか、そしてローカルの場合にはsrc/ディレクトリかpublic/ディレクトリにあるかにより異なります。

src, alt, format, dimensionsの属性が必要です。リモート画像の元のファイル形式を<Image />コンポーネントが判断できないため、出力format(例：png, avif)を提供する必要があります。また、コンテンツのレイアウトシフトを避けるために、幅と高さ、またはそのうちの一つとアスペクト比を提供する必要があります。

src/ディレクトリ内のローカル画像の場合は、srcとaltの属性が必要です。画像を frontmatter でインポートし、それを直接<Image />コンポーネントのsrc属性に渡します。altは必須ですが、他のすべてのプロパティはオプションで、提供されない場合は画像ファイルの元のプロパティが使用されます。

public/ディレクトリ内の画像の場合は、 src, alt, format, dimensionsの属性が必要です。コンポーネントのsrc属性に public フォルダに対する相対パスを渡し、altの値を含めます。リモート画像と同様に、幅と高さ、または一つの次元とアスペクト比の属性が必要です。また、画像を変換するためのformat属性の値(例：png, avif)が必要です。その他のプロパティはオプションです。あなたのオリジナルの画像は、public/内の全てのファイルと同様に、処理せずにビルドフォルダにコピーされ、Astro の画像統合は最適化されたバージョンの画像も返します。

以下に具体的な使用方法を書きます。

インストール

npm install @astrojs/image

astro.config.mjs

import { defineConfig } from 'astro/config'
import image from '@astrojs/image'

export default defineConfig({
  // ...
  integrations: [image()],
})

index.astro

---
import { Image } from '@astrojs/image/components'
---

<Image src="/images/dummy.webp" width={400} height={200} format="webp" alt="" />

変数に入れる場合

---
import { Image } from '@astrojs/image/components';
import localImage from "../assets/logo.png";
const remote

Image = "https://picsum.photos/id/957/300/200.jpg";
const localAlt = "The Astro Logo";
const remoteAlt = "A low-angle view of a forest during the daytime";
---

<!--optimized local image, keeping the original width, height, and image format-->
<Image src={localImage} alt={localAlt} />

<!-- height will be recalculated to match the original aspect ratio-->
<Image src={localImage} width={300} alt={localAlt} />

<!--For remote images, the desired dimensions and format are required-->
<Image src={remoteImage} width={300} aspectRatio="1:1" format="png" alt={remoteAlt} />

<!-- cropping to a specific width and height -->
<Image src={localImage} width={300} height={600} alt={localAlt}/>
<Image src={remoteImage} width={544} height={184} format="png" alt={remoteAlt}/>

<!-- cropping to a specific aspect ratio and converting to an avif format-->
<Image src={localImage} aspectRatio="16:9" format="avif" alt={localAlt}/>
<Image src={remoteImage} height={200} aspectRatio="16:9" format="avif" alt={remoteAlt}/>

<!-- local image imports can also be inlined directly-->
<Image src={import('../assets/logo.png')} alt={localAlt}/>

<!-- If an image is stored in the `/public` folder, use its path relative to `/public`-->
<Image src="/penguin.jpg" width="300" aspectRatio={1} format="png" alt="A happy penguin"/>

これらの例には、ローカル画像とリモート画像の両方が含まれており、どのように幅や高さ、アスペクト比を指定し、画像を特定のフォーマットに変換するかを示しています。

リンク

Astro では、Next.js の<Link>コンポーネントと同等のものは明示的に提供されていません。Next.js の<Link>コンポーネントはクライアントサイドのルーティングを提供しますが、Astro は基本的にサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）に重点を置いているため、このような機能は提供されていません。

それでも、ページ間のナビゲーションを行うためには、標準の<a>タグを使用することができます。例えば：

<a href="/about">About</a>

このリンクは、ブラウザが新しいページをロードするためにサーバーにリクエストを送信します。これは Next.js の<Link>コンポーネントと異なり、クライアントサイドのルーティングを使用しません。

なお、特定の状況下では、クライアントサイドのルーティングを Astro で実装することも可能です。それにはフロントエンドの JavaScript フレームワーク（例えば React や Vue.js）を Astro プロジェクトに導入する必要があります。ただし、このようなアプローチは Astro の主な目的（すなわち、可能な限り少ない JavaScript を使用して高速なウェブサイトを構築すること）とは異なるため、必要な場合にのみ採用することをおすすめします。

イベントハンドリング

スクリプトは、<script>タグを使用して Astro プロジェクトに追加することができます。Astro コンポーネントは基本的に HTML と同じように動作しますので、特定のコンポーネント内で必要な JavaScript コードを script ブロック内に記述することができます。

例えば、「上に戻るボタン」は次のようになります。

---
// Astro コンポーネントはこの範囲内に JavaScript を記述できます
// 必要に応じてロジックを追加します
---

<script>
  window.onscroll = function () {
    scrollFunction()
  }

  function scrollFunction() {
    var backToTopButton = document.getElementById('back-to-top')

    if (backToTopButton) {
      if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
        backToTopButton.style.display = 'block'
      } else {
        backToTopButton.style.display = 'none'
      }
    }
  }

  function topFunction() {
    window.scrollTo({ top: 0, behavior: 'smooth' }) // For smooth scrolling
  }

  var backToTopButton = document.getElementById('back-to-top')
  if (backToTopButton) {
    backToTopButton.addEventListener('click', topFunction)
  }
</script>

しかしなぜ、React のように useEffect などを使う必要がないのでしょうか？

例えば、Next.js は React を基にしています。React は Virtual DOM を使って UI の状態を管理します。そのため、コンポーネントのライフサイクル（つまり、コンポーネントがマウントされたとき、アップデートされたとき、アンマウントされたときなど）を扱うために特別な関数（ライフサイクルメソッドや、それを置き換えるためのフックシステム）が必要です。ここで useEffect というフックが使われ、これは副作用（例えば DOM の操作、API の呼び出し、イベントリスナーの設定など）を扱います。

一方、Astro はサーバーサイドで HTML を生成する静的サイトジェネレータであり、フロントエンドの JavaScript はオプションです。Astro では、デフォルトでページが静的にレンダリングされ、ブラウザに送られます。そのため、JavaScript はほとんど（またはまったく）必要としません。イベントハンドラは、HTML の一部として直接記述することができます。

ただし、Astro でも React や Vue などのフレームワークを使用することが可能です。その場合は、それらのフレームワークのライフサイクルメソッドやフックを使用する必要があります。

なお、Astro がフロントエンドの JavaScript を最小限に抑えることで、パフォーマンスの向上やより高速なロード時間を目指しています。これは特に大規模なサイトやパフォーマンスが重要なサイトにとって有益なことなんですね。

Vercel にデプロイ

Vercel は静的サイトやフロントエンド JavaScript アプリケーションのホスティングに特化したサービスです。もちろん、Astro プロジェクトのデプロイも簡単に行うことができます。

以下の手順で Vercel に Astro プロジェクトをデプロイできます：

1. Vercelにサインアップします。
2. サインアップ後、新規プロジェクトを作成します。
3. GitHub、GitLab、Bitbucket などからリポジトリを選択します。
4. プロジェクトの設定を行います。
5. プロジェクトをデプロイします。

たったこれだけで、プロジェクトはインターネット上に公開されます。また、Vercel ではデプロイプレビュー機能も提供しており、PR ごとに一意の URL が生成されます。これにより、クライアントはプレビューリンクを通じて変更を確認することができます。

src

src ディレクトリは次のようになっています。

.
├── components
│   ├── Footer.astro
│   ├── Fv.astro
│   └── Header.astro
├── layouts
│   └── Layout.astro
├── pages
│   └── index.astro
└── env.d.ts

Astro