Next.js環境構築手順

Next.jsを使ったブログサイトの構築手順をまとめました。

前提条件

• Node.js がインストールされていること
• npm または yarn が使用可能であること

セットアップ手順

1. プロジェクトの作成

npx create-next-app@latest my-blog
cd my-blog

2. 必要なライブラリのインストール

Markdownファイルを処理するために以下のライブラリをインストールします：

npm install gray-matter remark remark-html

3. ディレクトリ構成

project/
├── app/
│   ├── page.js          # ホームページ
│   └── posts/
│       └── [id]/
│           └── page.js  # 個別記事ページ
├── lib/
│   └── posts.js         # Markdown処理ロジック
└── posts/
    ├── hello-world.md   # 記事ファイル
    └── nextjs-setup.md  # 記事ファイル

4. GitHub Pages対応

静的エクスポートを有効にするため、next.config.mjsを設定します。

これで基本的な環境構築が完了です！