2023/04/10 積極的にメンテナンスできなくなったためアーカイブしました。 Next.js は引き続き人気ですが、「 Next.js でブログを作る」という使い方をする人はもう少なくなったのではないかという気がします。
React ベースのフレームワーク Next.js でシンプルなブログを作るサンプルです。
次のページにこのリポジトリのコードを使ったチュートリアルがあります:
- Node v18
main
: そのときどきの最新版
以下の NPM パッケージを使用しています。
next
react
react-dom
react-markdown
react-syntax-highlighter
rehype-raw
remark-gfm
gray-matter
Next.js を利用するために必要な next
react
react-dom
の 3 つと、 frontmatter 付きの Markdown の HTML への変換に有用な react-markdown
rehype-raw
remark-gfm
gray-matter
を使っています。
追加で、シンタックスハイライトに Prism.js を利用するための react-syntax-highlighter
を使っています。
自動テストには以下のパッケージを使用しています。
@babel/core
@babel/preset-env
@babel/preset-react
babel-jest
identity-obj-proxy
jest
react-test-renderer
Codespaces でこのリポジトリを開きます。
Codespaces の Visual Studio Code が開いたら「 Terminal 」のところから NPM パッケージをインストールします( Codespaces が自動的にインストールすることもあります)。
npm install
開発用プレビューを起動します。
npm run dev
ポート 3000
が開いてポートフォワーディングが行われるのでその URL を開きます。
試し終わったら Codespaces のスペースを破棄します。
# リポジトリをチェックアウト
git checkout https://github.com/gh640/nextjs-blog-example-ja.git
# プロジェクトルートに移動
cd nextjs-blog-example-ja/
# npm の依存パッケージをインストール
npm install
# 開発サーバーを走らせる
# 開発サーバーを止めたい場合は ctrl + c 等で
npm run dev
# ビルド
npm run build
# 静的サイトを生成して `out/` ディレクトリに出力する
npm run export
環境変数 GA_TRACKING_ID
でトラッキング ID をセットすれば、 Google Analytics のトラッキングコードをページに埋め込むことができます。
環境変数はターミナルでセットする方法と .env.local
ファイルを使用する方法が用意されているので、どちらでもやりやすい方を選んでください。
ターミナル:
export GA_TRACKING_ID=UA-XXX-XX
.env.local
ファイル:
GA_TRACKING_ID=UA-XXX-XX
具体的にどのような形でトラッキングコードが埋め込まれているか知りたい場合は、プロジェクト内の GA_TRACKING_ID
の使用箇所を探してみてください。
rg GA_TRACKING_ID
参考:
npm test
# または
npm run test