Menu

サイト基本情報のカスタマイズ

概要

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にあります。

サイト情報設定ガイド

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 - サイトアドレス

config/site.ts
export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";

目的:

  • すべての絶対URL(カノニカル、OG画像リンクなど)の生成に使用
  • SEOとソーシャルメディア共有に影響
  • 本番環境へのデプロイ時は、正しいドメイン名を設定する必要がある

2. name - サイト名

config/site.ts
name: "Nexty.dev"

目的:

  • ページタイトルに表示:{name} - {tagLine}およびページ名 | {name}
  • OGカードのsiteNameフィールドに表示

例:

  • ホームページ:Nexty.dev - Build and ship your SaaS faster
  • その他のページ:About | Nexty.dev

3. tagLine - サイトタグライン

config/site.ts
tagLine: "Build and ship your SaaS faster"

目的:

  • ホームページタイトルでのみ使用:サイト名 - タグライン

4. socialLinks - ソーシャルメディアリンク

config/site.ts
socialLinks: {
  github: 'https://github.com/yourusername',
  twitter: 'https://twitter.com/yourusername',
  // ...
}

目的:

  • Footerコンポーネントにソーシャルメディアアイコンを表示
  • 空文字列の場合、アイコンは表示されない

サポートされているプラットフォーム:

  • GitHub、Twitter、YouTube、Instagram、TikTok
  • Discord、Email、LinkedIn、Facebook
  • 拡張可能。拡張する場合はsite.tsFooter.tsxの両方を同期して変更する必要がある

5. themeColors - テーマカラー

config/site.ts
themeColors: [
  { media: '(prefers-color-scheme: light)', color: 'white' },
  { media: '(prefers-color-scheme: dark)', color: 'black' },
]

目的:

  • ブラウザアドレスバー/タスクスイッチャーの色を設定
  • 特にモバイルデバイスで顕著に表示される

ブランドカラーに設定可能:

config/site.ts
themeColors: [
  { media: '(prefers-color-scheme: light)', color: '#3b82f6' },
  { media: '(prefers-color-scheme: dark)', color: '#1e40af' },
]

6. icons - アイコン設定

config/site.ts
icons: {
  icon: "/favicon.ico",        // ブラウザタブアイコン
  shortcut: "/logo.png",        // ショートカットアイコン
  apple: "/logo.png",           // iOSホーム画面アイコン
}

推奨サイズ:

  • favicon.ico:32×32または64×64
  • logo.png:512×512(透過背景)

サイト設定の型定義はtypes/siteConfig.tsにあります。フィールドを拡張したい場合は、型定義も同期して更新する必要があります。

ロゴ生成

マルチサイズアイコン生成ツールの推奨:

生成したロゴとicoファイルをpublicフォルダに保存し、ボイラープレートのデフォルトロゴ画像を置き換えます。

OG画像の設定と作成

OG(Open Graph)画像は、ウェブサイトのリンクがソーシャルメディア(Twitter、Facebook、LinkedInなど)で共有された際に表示されるプレビュー画像です。

効果例:

og example

プレビュー画像を表示することで、潜在的なユーザーのクリックを促進できます。

ファイルの場所と命名規則

public/
├── og.png           # 英語版(デフォルト)
├── og_zh.png        # 中国語版
└── og_ja.png        # 日本語版

ルール:

  • デフォルト言語(英語):og.png
  • その他の言語:og_{locale}.png(例:og_zh.pngog_ja.png

OG画像の作成

静的OG画像は、以下のようなオンラインツールを使用して生成できます:

動的OG画像はnext/ogを使用して生成できます。ディレクトリボイラープレートのopengraph-image.tsxファイルを参照してください。

OG画像のテスト

初回共有後、ソーシャルプラットフォームは画像をキャッシュします。画像を変更した場合は、上記のツールでキャッシュを更新することもできます。