---
# System prepended metadata

title: Next.js を使ってブログを構築する
tags: [React チュートリアル]

---

---
tags:
  - React チュートリアル
---

# Next.js を使ってブログを構築する

## 目的

このチュートリアルを通じて学んでほしいことは以下の通りである。
これらの内容については特に意識をしながら内容を進めてほしい。

- Server Side Rendering の初歩について理解する
- Static Site Generation を用いた複数ページサイトの構築方法を学ぶ
- CSS Module を用いた Web サイトのスタイリングを学ぶ
- TypeScript を用いた React コンポーネントやスクリプトの書き方を学ぶ

## ゴール

このチュートリアルの具体的なゴールを例示する。チュートリアルの完成物として以下のようなサイトをイメージしてほしい。

- [Qiita](https://qiita.com/)
- [Zenn](https://zenn.dev/)

詳細な要件については次に述べる

### サイト要件

- React のフレームワークとして [Next.js](https://nextjs.org/) を用いること
    - 可能であれば [app directory](https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory) を用いず pages directory を用いるようにする
- ブログ投稿について
    - ブログの投稿はファイルの作成をもって行うこと
    - ブログ投稿者は自分自身のみを想定すること
    - ブログには任意のタグをつけることができ、タグ毎に一覧ページを用意すること
- レポジトリは [GitHub](https://github.co.jp/) 上で管理すること
    - レポジトリ名は `<GitHubのアカウント名>.github.io` とすること。
      - 例）アカウント名が `YutaUra` の場合 `YutaUra.github.io` などとすること。 `yutaura.github.io` のように小文字にしても良い。
- サイトのホスティングに [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages) を用いること
- main ブランチへの push をトリガーとしたサイトの構築及びデプロイを行う [GitHub Actions](https://github.co.jp/features/actions) を用意すること
- 言語として、 [TypeScript](https://www.typescriptlang.org/) を用いること
- スタイリングの方法として [CSS Module](https://github.com/css-modules/css-modules) を用いること

その他の要件については基本的に自由とする。

## 作業方法とコードレビューについて

- 作業をする際は**必ず**ブランチを分けて行うこと。
- 作業前にブランチを作成し、作業が完了したら適宜 PR(Pull Request) を作成すること
- PR には必ず他者によるコードレビューを通すこと

コードレビューについて
- コードレビューの目的について
    - プロジェクトにおいて
        - レビューを通すことでコードの品質を保つ
        - 複数人で開発する場合においてはコードのオーナーシップを共有する
        - 似たようなコードが複数の箇所に散らばらないように、コードの全体感を把握できるようにする
    - レビューする側（レビュワー）
        - 他者が書いたコードを読むことでコードを読む力を培う
        - 読みにくいコード・読みやすいコードについて客観的な視点を養う
        - 良いコード・良くないコードがあった場合に参考にできる
        - コードを脳内で実行することで、シュミレート力を鍛えると共に脳内メモリを拡大させる
    - レビューされる側（レビュイー）
        - 他者でも読みやすいようなコードを意識できる
        - 自分では気づかなかった観点などに気づける
- コードレビューでは、「動作しない」や「エラーが発生している」などの致命的な場合を除き全ての指摘は**修正任意**とする。
    - 指摘する者もそのつもりでたくさん指摘してあげてください。
    - 指摘された内容を全て修正する必要はありません。コードの修正は全て自分の判断で行うこと。
- レビューのコツ
    - 言葉選びには注意しましょう。冷たい言葉で指摘されると悲しい気持ちになってしまうので、優しく指摘することを心がけてください。
    - 指摘をするかしないかで迷った場合は指摘をしましょう。最初のうちは細かい指摘でも相手の成長につながります。
    - 指摘にはなるべく客観性を持たせましょう。「なんとなくこっちの書き方が良さそう」などの個人的な好き嫌いでの指摘をダメとは言いませんが、「〇〇の原則に照らし合わせて考えると、こっちの書き方の方が良さそうに感じる」などのように指摘できると良いです。

## 参考資料

- [Next.js 公式ドキュメント](https://nextjs.org/docs)
    - [Next.js と CSS Module](https://nextjs.org/docs/basic-features/built-in-css-support)
    - [Next.js と MDX](https://beta.nextjs.org/docs/guides/mdx)
- [サバイバル TypeScript](https://typescriptbook.jp/)
- [CSS by MDN](https://developer.mozilla.org/ja/docs/Web/CSS)