---
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)