8.9 KiB
8.9 KiB
Nexty で SaaS を迅速に立ち上げよう - ビジュアル料金ダッシュボード、AI プレイグラウンド、エンタープライズレベル CMS を備えた唯一の Next.js ボイラープレート。多言語対応、認証、決済、メール機能、SEO 最適化も完備。
Nexty.dev を今すぐ試す
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 の使用を推奨しています。
インストール手順
- リポジトリのクローン：
git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter
- Corepack の有効化（推奨）：
corepack enable
- 依存関係のインストール：
pnpm install
# または他のパッケージマネージャーを使用
npm install
yarn
- 環境変数の設定：
cp .env.example .env
- 開発サーバーの起動：
pnpm dev
# または npm run dev
http://localhost:3000 にアクセスして確認できます。
⚙️ 設定方法
-
基本設定
config/site.tsでウェブサイト情報を編集public/内のアイコンとロゴを更新app/sitemap.tsでサイトマップを設定app/robots.tsでrobots.txtを更新
-
多言語設定
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（推奨）
🚀 デプロイ
ワンクリックデプロイ
Vercelへの手動デプロイ
- GitHubにコードをプッシュ
- Vercelでプロジェクトをインポート
- 環境変数を設定
- デプロイ
その他のプラットフォーム
# プロダクション用ビルド
pnpm build
# プロダクションサーバーを起動
pnpm start
💡 開発のベストプラクティス
パッケージマネージャー使用
- プロジェクトは
packageManager: "pnpm@10.12.4"で設定済み - Corepack を有効化:
corepack enable - チームメンバーは同じ pnpm バージョンを使用すべき
コード品質
# コードリント
pnpm lint
# 型チェック
pnpm type-check
多言語開発
-
新しい言語サポートの追加：
i18n/messages/に新しい言語ファイルを追加i18n/routing.ts設定を更新blog/とcontent/に対応する言語ディレクトリを作成
-
翻訳の使用：
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 までご連絡ください。
