290 lines
8.9 KiB
Markdown
290 lines
8.9 KiB
Markdown
---
|
||
Nexty で SaaS を迅速に立ち上げよう - ビジュアル料金ダッシュボード、AI プレイグラウンド、エンタープライズレベル CMS を備えた唯一の Next.js ボイラープレート。多言語対応、認証、決済、メール機能、SEO 最適化も完備。
|
||
|
||
[Nexty.dev を今すぐ試す](https://nexty.dev?utm_source=github-nextjs-starter)
|
||
---
|
||
|
||
[<img src="/public/try-nexty.webp">](https://nexty.dev?utm_source=github-nextjs-starter)
|
||
|
||
🌍 *[English](README.md) ∙ [简体中文](README_zh.md) ∙ [日本語](README_ja.md)*
|
||
|
||
# Next Forge - 多言語対応 Next.js 16 スターター
|
||
|
||
グローバル対応のウェブサイトを素早く構築するための、機能豊富なNext.js 15多言語スターターテンプレートです。
|
||
|
||
- [👉 ソースコード](https://github.com/weijunext/nextjs-starter)
|
||
- [👉 デモサイト](https://nextforge.dev/)
|
||
|
||
**🚀 多機能で使いやすいフルスタックの起動テンプレートをお探しですか？ ぜひ、当社の[アドバンス版](https://nexty.dev)をお試しください。**
|
||
|
||
## ✨ 主な機能
|
||
|
||
- 🌐 多言語対応（英語・中国語・日本語）
|
||
- 🎨 Tailwind CSSによるモダンなUI
|
||
- 🌙 ダーク/ライトテーマ切り替え
|
||
- 📱 レスポンシブデザイン
|
||
- 📝 MDXブログシステム
|
||
- 🔍 SEO最適化
|
||
- 📊 アナリティクスツール統合
|
||
- Google Analytics
|
||
- Baidu Analytics
|
||
- Google Adsense
|
||
- Vercel Analytics
|
||
|
||
## 🚀 クイックスタート
|
||
|
||
### 必要な環境
|
||
|
||
- Node.js 20.9 以上
|
||
- pnpm 9.0 以上（推奨）
|
||
|
||
> **注意**: プロジェクトには `packageManager` フィールドが設定されており、最適な体験のために pnpm の使用を推奨しています。
|
||
|
||
### インストール手順
|
||
|
||
1. リポジトリのクローン：
|
||
```bash
|
||
git clone https://github.com/weijunext/nextjs-starter.git
|
||
cd nextjs-starter
|
||
```
|
||
|
||
2. Corepack の有効化（推奨）：
|
||
```bash
|
||
corepack enable
|
||
```
|
||
|
||
3. 依存関係のインストール：
|
||
```bash
|
||
pnpm install
|
||
# または他のパッケージマネージャーを使用
|
||
npm install
|
||
yarn
|
||
```
|
||
|
||
4. 環境変数の設定：
|
||
```bash
|
||
cp .env.example .env
|
||
```
|
||
|
||
5. 開発サーバーの起動：
|
||
```bash
|
||
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ファイルを以下のフォーマットで作成：
|
||
|
||
```markdown
|
||
---
|
||
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（推奨）
|
||
|
||
## 🚀 デプロイ
|
||
|
||
### ワンクリックデプロイ
|
||
|
||
[](https://vercel.com/new/clone?repository-url=https://github.com/weijunext/nextjs-starter&project-name=&repository-name=nextjs-starter&demo-title=NextjsStarter&demo-description=Nextjs%2015%20starter.&demo-url=https://nextforge.dev&demo-image=https://nextforge.dev/og.png)
|
||
|
||
### Vercelへの手動デプロイ
|
||
|
||
1. GitHubにコードをプッシュ
|
||
2. Vercelでプロジェクトをインポート
|
||
3. 環境変数を設定
|
||
4. デプロイ
|
||
|
||
### その他のプラットフォーム
|
||
|
||
```bash
|
||
# プロダクション用ビルド
|
||
pnpm build
|
||
|
||
# プロダクションサーバーを起動
|
||
pnpm start
|
||
```
|
||
|
||
## 💡 開発のベストプラクティス
|
||
|
||
### パッケージマネージャー使用
|
||
|
||
- プロジェクトは `packageManager: "pnpm@10.12.4"` で設定済み
|
||
- Corepack を有効化: `corepack enable`
|
||
- チームメンバーは同じ pnpm バージョンを使用すべき
|
||
|
||
### コード品質
|
||
|
||
```bash
|
||
# コードリント
|
||
pnpm lint
|
||
|
||
# 型チェック
|
||
pnpm type-check
|
||
```
|
||
|
||
### 多言語開発
|
||
|
||
1. 新しい言語サポートの追加：
|
||
- `i18n/messages/` に新しい言語ファイルを追加
|
||
- `i18n/routing.ts` 設定を更新
|
||
- `blog/` と `content/` に対応する言語ディレクトリを作成
|
||
|
||
2. 翻訳の使用：
|
||
```tsx
|
||
import { useTranslations } from 'next-intl';
|
||
|
||
export default function MyComponent() {
|
||
const t = useTranslations('namespace');
|
||
return <h1>{t('title')}</h1>;
|
||
}
|
||
```
|
||
|
||
## 🔧 トラブルシューティング
|
||
|
||
### よくある問題
|
||
|
||
**1. パッケージマネージャーのバージョン不一致**
|
||
```bash
|
||
# 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` ファイルに必要な設定が含まれていることを確認：
|
||
```bash
|
||
# サンプル設定をコピー
|
||
cp .env.example .env
|
||
# 必要に応じて設定を変更
|
||
```
|
||
|
||
## 📄 ライセンス
|
||
|
||
MIT
|
||
|
||
## 🤝 コントリビューション
|
||
|
||
Issue、PRは大歓迎です！
|
||
|
||
## 作者について
|
||
|
||
Next.jsのフルスタックスペシャリストとして、プロジェクト開発、パフォーマンス最適化、SEO改善のエキスパートサービスを提供しています。
|
||
|
||
コンサルティングやトレーニングについては、 weijunext@gmail.com までご連絡ください。
|
||
|
||
- [Github](https://github.com/weijunext)
|
||
- [Bento](https://bento.me/weijunext)
|
||
- [Twitter/X](https://twitter.com/judewei_dev)
|
||
|
||
<a href="https://www.buymeacoffee.com/weijunext" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
|
||
|
||
[](https://ko-fi.com/G2G6TWWMG) |