Base URL

2025年01月12日

・

2025年01月12日

環境に応じて適切なベース URL を取得するユーティリティ関数です。Vercel の環境変数を自動的に判別し、本番環境、プレビュー環境、ローカル環境それぞれに最適な URL を返します。

インストール

pnpx shadcn@latest add https://www.dninomiya.com/r/base-url.json

使い方

layout.tsx での使用

// app/layout.tsx
import { baseUrl } from "@/lib/base-url";
import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL(baseUrl()),
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

API リファレンス

baseUrl

function baseUrl(options?: { 
  useCommitURL?: boolean 
}): string

Parameters

Name	Type	Default	Description
options	object	-	オプション設定
options.useCommitURL	boolean	false	true の場合、コミット固有の URL を返す（プレビュー環境のみ）

Returns

string - 環境に応じたベース URL

本番環境: VERCEL_PROJECT_PRODUCTION_URL を使用
プレビュー環境: VERCEL_BRANCH_URL または VERCEL_URL（useCommitURL が true の場合）を使用
ローカル環境: http://localhost:3000（または PORT 環境変数で指定されたポート）

環境変数

この関数は以下の Vercel 環境変数を使用します。Vercel にデプロイすると自動的に NEXT_PUBLIC_ プレフィックス付きで利用可能になります：

環境変数	説明
`VERCEL_ENV`	現在の環境（`production`, `preview`, `development`）
`VERCEL_PROJECT_PRODUCTION_URL`	本番環境の URL
`VERCEL_BRANCH_URL`	ブランチのプレビュー URL
`VERCEL_URL`	コミット固有のプレビュー URL
`PORT`	ローカル環境のポート番号（デフォルト: 3000）

詳細は Vercel のドキュメントをご覧ください。

使用例

動的メタデータの生成

// app/blog/[slug]/page.tsx
import { baseUrl } from "@/lib/base-url";
import type { Metadata } from "next";

export async function generateMetadata({ 
  params 
}: { 
  params: { slug: string } 
}): Promise<Metadata> {
  const url = baseUrl();
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    openGraph: {
      images: [`${url}/og/${params.slug}.png`],
    },
  };
}

Command Palette