Next.jsでブログを作った経験を整理しようと思います。テーマ選定からページ構成、デザインの方向性、開発環境のセットアップ、協業方法まで、段階ごとに「どうやって」進めるのか分かりやすく説明します。
ブログのテーマを決める#
ブログで最も重要なのは、どんな内容を扱うかテーマを選ぶことです。
開発者ならコーディングテスト、就活準備、プロジェクト経験、エラー解決といったテーマが良いですし、日常ブロガーならグルメ、旅行、読書の話などから始められます。
誰が自分の記事を読むか、想定読者を考えながらテーマを組み立てると、訪問者とのコミュニケーションもうまくいき、記事に集中する力が生まれます。
ページごとに構成を計画する#
メイン画面と記事詳細ページは必ず作る必要があります。
ブック一覧、タグ別記事、自己紹介の「About me」ページも追加しました。
各ページがどんな役割を果たすか、ユーザーがどんな流れでサイトを回遊するかを事前に設計します。
例えばメイン画面では最新記事3件を上部に配置し、残りの記事は日付順に表示します。
各記事は画像付きで、クリックすると詳細ページに遷移するように作ります。
ブログのデザインを決める#
快適で集中しやすいスタイルを考えてみましょう。
読みやすいフォントと余白、直線を活用したすっきりしたデザインも良いです。
この際、TailwindCSSを活用すると素早くスタイリング作業ができ、モバイルから大画面モニターまでレスポンシブに対応できて便利です。
参考になるサイトを紹介します：
マークダウンのメタデータを決める#
記事ごとにタイトル、日付、カテゴリ、シリーズ、タグ、代表画像などのメタデータを入れて管理すると良いです。
こうすることで、タグ別・シリーズ別のソートやフィルター機能の実装もずっと楽になります。例えば、記事ファイルの冒頭にこうした情報を明確に記載しておきます。
たくさん追加しても良いですが、2〜5個に絞るのがおすすめです。自分は3つだけ使っています。（title, date, tags）
title: Welcome Docusaurus
date: 2021-09-13T18:00
description: This is my first post on Docusaurus.
slug: welcome-docusaurus-v2
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
開発環境を構築する#
Node.jsランタイムとnpmパッケージマネージャーを使い、開発IDEはVS Codeを選びました。
VS Codeでは必須の拡張機能（Prettier、ESLint、Tailwind CSS IntelliSenseなど）をインストールします。
コードスタイルはPrettierで統一し、ESLintで文法警告のみ出すように設定します。また、好みに合わせてカスタマイズしても大丈夫です。
Gitブランチはmainをデプロイ用、devを開発用で管理し、GitHub ActionsでCI/CDを自動化します。
状態管理はZustandやRecoilなど、好きなものを使えば良いです。
おそらく以下のスタックで構成されるでしょう：
- Next.js
- React
- TailwindCSS
- Typescript && Javascript
ページ別の作業スペックを決める#
以下のような構成を考えてみました。参考にして、改善してみてください。
- メイン画面：最新記事3件を上部に、残りは日付順でリスト化。検索フィルターを追加。
- ブック画面：読んだ本、読んでいる本、読みたい本を区分して必要な情報を表示し、詳細ページに画像とレビュー、購入リンクを追加。
- 記事詳細ページ：タイトル、作成日、予想読了時間、共有ボタンを上部に配置し、本文はマークダウンをHTMLに変換して表示。
- シリーズ画面：シリーズ別の記事数とリスト、該当シリーズがなければメニューから除外。
- タグ画面：タグ別の記事数とフィルタリング機能を提供。
- 紹介ページ：写真カルーセルと挨拶文、SNSリンクアイコンを配置。
実際の開発に入る前に全体的な構造を頭の中に描き、必要な詳細項目をスペックドキュメントとして整理しておくと、開発中の混乱が減り、良い成果物を得ることができます。素敵なブログを作ってみましょう！
Time is the wisest counsellor of all.
— Pericles
