This commit is contained in:
砂糖
2025-11-21 13:36:06 +08:00
commit 7cd50654ed
112 changed files with 14246 additions and 0 deletions

290
README_ja.md Normal file
View File

@@ -0,0 +1,290 @@
---
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推奨
## 🚀 デプロイ
### ワンクリックデプロイ
[![Deploy with Vercel](https://vercel.com/button)](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>
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G6TWWMG)