DeXun/sage-home
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8600a01ce487e045900997e5cab326414f8a7020
sage-home/README_ja.md
砂糖 70f337bb92 init
2026-01-24 16:54:44 +08:00

8.9 KiB
Raw Blame History

Nexty で SaaS を迅速に立ち上げよう - ビジュアル料金ダッシュボード、AI プレイグラウンド、エンタープライズレベル CMS を備えた唯一の Next.js ボイラープレート。多言語対応、認証、決済、メール機能、SEO 最適化も完備。 Nexty.dev を今すぐ試す

🌍 English ∙ 简体中文 ∙ 日本語

Next Forge - 多言語対応 Next.js 16 スターター

グローバル対応のウェブサイトを素早く構築するための、機能豊富なNext.js 15多言語スターターテンプレートです。

🚀 多機能で使いやすいフルスタックの起動テンプレートをお探しですか？ ぜひ、当社のアドバンス版をお試しください。

✨ 主な機能

  • 🌐 多言語対応（英語・中国語・日本語）
  • 🎨 Tailwind CSSによるモダンなUI
  • 🌙 ダーク/ライトテーマ切り替え
  • 📱 レスポンシブデザイン
  • 📝 MDXブログシステム
  • 🔍 SEO最適化
  • 📊 アナリティクスツール統合
    • Google Analytics
    • Baidu Analytics
    • Google Adsense
    • Vercel Analytics

🚀 クイックスタート

必要な環境

  • Node.js 20.9 以上
  • pnpm 9.0 以上（推奨）

注意: プロジェクトには packageManager フィールドが設定されており、最適な体験のために pnpm の使用を推奨しています。

インストール手順

  1. リポジトリのクローン：
git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter
  1. Corepack の有効化（推奨）：
corepack enable
  1. 依存関係のインストール：
pnpm install
# または他のパッケージマネージャーを使用
npm install
yarn
  1. 環境変数の設定：
cp .env.example .env
  1. 開発サーバーの起動：
pnpm dev
# または npm run dev

http://localhost:3000 にアクセスして確認できます。

⚙️ 設定方法

  1. 基本設定

    • config/site.tsでウェブサイト情報を編集
    • public/内のアイコンとロゴを更新
    • app/sitemap.tsでサイトマップを設定
    • app/robots.tsでrobots.txtを更新

  2. 多言語設定

    • i18n/messages/内の言語ファイルを追加/編集
    • i18n/routing.tsでサポートする言語を設定
    • middleware.tsで多言語ルーティングを設定
    • app/[locale]/配下にページを作成
    • Next.jsデフォルトの代わりにi18n/routing.tsのLinkコンポーネントを使用

📝 コンテンツ管理

ブログ投稿

blog/[locale]にMDXファイルを以下のフォーマットで作成：

---
title: 投稿タイトル
description: 投稿の説明
image: /image.png
slug: /url-path
tags: tag1,tag2
date: 2025-02-20
visible: published
pin: true
---

投稿内容...

対応フィールドについてはtypes/blog.tsを参照してください。

静的ページ

content/[page]/[locale].mdxで静的ページのコンテンツを管理します。

🔍 SEO最適化

包括的なSEO機能を搭載：

  • サーバーサイドレンダリングと静的生成
  • sitemap.xml自動生成
  • robots.txt設定
  • 最適化されたメタデータ
  • OGP対応
  • 多言語SEOサポート

📊 アナリティクス

.envにIDを追加して有効化：

NEXT_PUBLIC_GOOGLE_ANALYTICS=
NEXT_PUBLIC_BAIDU_TONGJI=
NEXT_PUBLIC_GOOGLE_ADSENSE=

📁 プロジェクト構成

nextjs-starter/
├── app/                      # アプリディレクトリ
│   ├── [locale]/            # 多言語ルート
│   │   ├── about/           # Aboutページ
│   │   ├── blog/           # ブログページ
│   │   └── ...              # その他のページ
│   ├── api/                 # APIルート
│   └── globals/             # グローバルコンポーネント
├── blog/                   # ブログコンテンツ（MDX）
│   ├── en/                  # 英語ブログ
│   ├── ja/                  # 日本語ブログ
│   └── zh/                  # 中国語ブログ
├── components/              # 再利用可能なコンポーネント
│   ├── ui/                  # ベースUIコンポーネント
│   ├── header/              # ヘッダーコンポーネント
│   ├── footer/              # フッターコンポーネント
│   └── ...                  # その他のコンポーネント
├── config/                  # 設定ファイル
├── content/                 # 静的コンテンツ（MDX）
├── i18n/                    # 国際化設定
│   ├── messages/            # 翻訳ファイル
│   ├── routing.ts           # ルーティング設定
│   └── request.ts           # リクエスト設定
├── lib/                     # ユーティリティ関数
├── public/                  # 静的アセット
└── types/                   # 型定義

🛠️ 技術スタック

  • フレームワーク: Next.js 16 (App Router)
  • 言語: TypeScript
  • スタイリング: Tailwind CSS + Shadcn/ui
  • 国際化: next-intl
  • コンテンツ: MDX
  • 状態管理: Zustand
  • デプロイ: Vercel
  • パッケージマネージャー: pnpm（推奨）

🚀 デプロイ

ワンクリックデプロイ

Deploy with Vercel

Vercelへの手動デプロイ

  1. GitHubにコードをプッシュ
  2. Vercelでプロジェクトをインポート
  3. 環境変数を設定
  4. デプロイ

その他のプラットフォーム

# プロダクション用ビルド
pnpm build

# プロダクションサーバーを起動
pnpm start

💡 開発のベストプラクティス

パッケージマネージャー使用

  • プロジェクトは packageManager: "pnpm@10.12.4" で設定済み
  • Corepack を有効化: corepack enable
  • チームメンバーは同じ pnpm バージョンを使用すべき

コード品質

# コードリント
pnpm lint

# 型チェック
pnpm type-check

多言語開発

  1. 新しい言語サポートの追加：

    • i18n/messages/ に新しい言語ファイルを追加
    • i18n/routing.ts 設定を更新
    • blog/ と content/ に対応する言語ディレクトリを作成

  2. 翻訳の使用：

import { useTranslations } from 'next-intl';

export default function MyComponent() {
  const t = useTranslations('namespace');
  return <h1>{t('title')}</h1>;
}

🔧 トラブルシューティング

よくある問題

1. パッケージマネージャーのバージョン不一致

# node_modules と lockfile を削除
rm -rf node_modules pnpm-lock.yaml
# 再インストール
pnpm install

2. MDXファイルが表示されない

  • ファイルパスが正しいか確認
  • frontmatter のフォーマットが正しいか確認
  • visible フィールドが published に設定されているか確認

3. 多言語ルーティングの問題

  • i18n/routing.ts の Link コンポーネントを使用
  • middleware.ts の設定を確認

4. スタイルが効かない

  • Tailwind CSS のクラス名が正しいか確認
  • 開発サーバーの再起動を試す

環境変数の問題

.env ファイルに必要な設定が含まれていることを確認：

# サンプル設定をコピー
cp .env.example .env
# 必要に応じて設定を変更

📄 ライセンス

MIT

🤝 コントリビューション

Issue、PRは大歓迎です！

作者について

Next.jsのフルスタックスペシャリストとして、プロジェクト開発、パフォーマンス最適化、SEO改善のエキスパートサービスを提供しています。

コンサルティングやトレーニングについては、 weijunext@gmail.com までご連絡ください。

Buy Me A Coffee

ko-fi