サイト基本情報のカスタマイズ
概要
Nexty.devは一元化された設定管理を採用しており、わずか数個のファイルを変更するだけで、サイト全体のブランディング情報とSEO設定を制御できます。
サイトのブランディングとSEO設定に関連するファイルは以下の通りです:
nexty-wenext/
├── config/
│ └── site.ts # サイト基本設定(ドメイン、作成者、ソーシャルリンクなど)
├── lib/
│ └── metadata.ts # メタデータ生成ユーティリティ
├── i18n/
│ └── routing.ts # 多言語設定
├── public/
│ ├── logo.png # サイトロゴ
│ ├── favicon.ico # サイトアイコン
│ ├── og.png # デフォルト言語(英語)OG画像
│ ├── og_zh.png # 中国語OG画像
│ └── og_ja.png # 日本語OG画像
└── app/
└── [locale]/
└── layout.tsx # 📄 使用例メタデータ生成に関するドキュメントは、こちらのドキュメントをご参照ください。
サイト設定
サイトブランディング情報の統一設定ファイルはconfig/site.tsにあります。
サイト情報設定ガイド
import { SiteConfig } from "@/types/siteConfig";
// サイトベースURL(必須)
export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";
// ソーシャルメディアリンク(オプション)
const GITHUB_URL = ''
const TWITTER_URL = ''
const YOUTUBE_URL = ''
const INSTAGRAM_URL = ''
const TIKTOK_URL = ''
const DISCORD_URL = ''
const EMAIL_URL = '[email protected]'
export const siteConfig: SiteConfig = {
// サイト名(ページタイトルに表示)
name: "Nexty.dev",
// サイトタグライン(オプション、ホームページタイトルで使用)
tagLine: "Build and ship your SaaS faster",
// サイト説明(オプション、デフォルトは多言語ファイルを使用)
description: "Next.js SaaS starter template with authentication, payments, and more.",
// サイトURL(必須)
url: BASE_URL,
// 作成者情報(SEO用)
authors: [
{
name: "nexty.dev",
url: BASE_URL,
}
],
// クリエイター(Twitterユーザー名)
creator: '@judewei_dev',
// ソーシャルメディアリンク、デフォルトで`components/footer/Footer.tsx`に表示
socialLinks: {
github: GITHUB_URL,
twitter: TWITTER_URL,
youtube: YOUTUBE_URL,
instagram: INSTAGRAM_URL,
tiktok: TIKTOK_URL,
discord: DISCORD_URL,
email: EMAIL_URL,
// さらにソーシャルリンクを追加可能。追加後は`components/footer/Footer.tsx`を更新してジャンプリンクを追加
linkedin: '',
facebook: '',
},
// テーマカラー(ブラウザアドレスバー/タスクスイッチャーの色)
themeColors: [
{ media: '(prefers-color-scheme: light)', color: 'white' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
// サイトデフォルトテーマ(light | dark | system)
defaultNextTheme: 'light',
// アイコン設定
icons: {
icon: "/favicon.ico", // ブラウザタブアイコン
shortcut: "/logo.png", // ショートカットアイコン
apple: "/logo.png", // iOSホーム画面追加アイコン
},
}設定オプションの説明
1. BASE_URL - サイトアドレス
export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";目的:
- すべての絶対URL(カノニカル、OG画像リンクなど)の生成に使用
- SEOとソーシャルメディア共有に影響
- 本番環境へのデプロイ時は、正しいドメイン名を設定する必要がある
2. name - サイト名
name: "Nexty.dev"目的:
- ページタイトルに表示:
{name} - {tagLine}およびページ名 | {name} - OGカードの
siteNameフィールドに表示
例:
- ホームページ:
Nexty.dev - Build and ship your SaaS faster - その他のページ:
About | Nexty.dev
3. tagLine - サイトタグライン
tagLine: "Build and ship your SaaS faster"目的:
- ホームページタイトルでのみ使用:
サイト名 - タグライン
4. socialLinks - ソーシャルメディアリンク
socialLinks: {
github: 'https://github.com/yourusername',
twitter: 'https://twitter.com/yourusername',
// ...
}目的:
- Footerコンポーネントにソーシャルメディアアイコンを表示
- 空文字列の場合、アイコンは表示されない
サポートされているプラットフォーム:
- GitHub、Twitter、YouTube、Instagram、TikTok
- Discord、Email、LinkedIn、Facebook
- 拡張可能。拡張する場合は
site.tsとFooter.tsxの両方を同期して変更する必要がある
5. themeColors - テーマカラー
themeColors: [
{ media: '(prefers-color-scheme: light)', color: 'white' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
]目的:
- ブラウザアドレスバー/タスクスイッチャーの色を設定
- 特にモバイルデバイスで顕著に表示される
ブランドカラーに設定可能:
themeColors: [
{ media: '(prefers-color-scheme: light)', color: '#3b82f6' },
{ media: '(prefers-color-scheme: dark)', color: '#1e40af' },
]6. icons - アイコン設定
icons: {
icon: "/favicon.ico", // ブラウザタブアイコン
shortcut: "/logo.png", // ショートカットアイコン
apple: "/logo.png", // iOSホーム画面アイコン
}推奨サイズ:
favicon.ico:32×32または64×64logo.png:512×512(透過背景)
サイト設定の型定義はtypes/siteConfig.tsにあります。フィールドを拡張したい場合は、型定義も同期して更新する必要があります。
ロゴ生成
マルチサイズアイコン生成ツールの推奨:
- https://icon.kitchen
- https://realfavicongenerator.net/
- https://logo.surf
- https://ray.so/icon?q=
- https://www.bitbug.net/(PNGをFaviconに変換)
生成したロゴとicoファイルをpublicフォルダに保存し、ボイラープレートのデフォルトロゴ画像を置き換えます。
OG画像の設定と作成
OG(Open Graph)画像は、ウェブサイトのリンクがソーシャルメディア(Twitter、Facebook、LinkedInなど)で共有された際に表示されるプレビュー画像です。
効果例:

プレビュー画像を表示することで、潜在的なユーザーのクリックを促進できます。
ファイルの場所と命名規則
public/
├── og.png # 英語版(デフォルト)
├── og_zh.png # 中国語版
└── og_ja.png # 日本語版ルール:
- デフォルト言語(英語):
og.png - その他の言語:
og_{locale}.png(例:og_zh.png、og_ja.png)
OG画像の作成
静的OG画像は、以下のようなオンラインツールを使用して生成できます:
動的OG画像はnext/ogを使用して生成できます。ディレクトリボイラープレートのopengraph-image.tsxファイルを参照してください。
OG画像のテスト
- Twitter Card Validator
- Facebook Sharing Debugger
- LinkedIn Post Inspector
- Open Graph Debugger
- OG Check
初回共有後、ソーシャルプラットフォームは画像をキャッシュします。画像を変更した場合は、上記のツールでキャッシュを更新することもできます。