テンプレートは以下を参考にした
https://zenn.dev/taichifukumoto/articles/setup-next-12-typescript-tailwind-tamplate
Route API を用いた graphql は以下を参考にした
https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql
Next.js の開発はこのテンプレートをベースに行ってください。
package.json を参照ください。
プロジェクトのスタイリングは Tailwind CSS を使用しています。postcss と autoprefixer も一緒に使用しています。
catnose さんが作成した SEO カスタマイズ系の軽量パッケージです。Layout コンポーネントで使用しています。
husky は、git でコミットする直前に登録したコマンドを実行してくれるツールです。コミット前に Prettier と ESLint を走らせるようにしています。
（カスタマイズするとプッシュ前にコマンドは走らせることもできる）
あわせて lint-staged も使用していて、こちらは stage に上がっているファイルに対して Lint をかけてくれるツールです。
テンプレートは以下の手順で使用してください。
create-next-app の --example オプションを使ってテンプレートからプロジェクトを始めることができます。
以下のコマンドの your-app-name に自分の作りたいプロジェクト名を入れてコマンドを実行してください。
npx create-next-app your-app-name --example https://github.com/UnReacts/next-template-v12プロジェクトの内容にあわせて、README.mdを書き換えます。
1 番下に README.md の参考を載せています。
README.mdを書き換えたら、プロジェクトリポジトリにプッシュします。
あらかじめからのリポジトリを作成しておきます。
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <リポジトリのURL>
git push -u origin main今回は、すべてのファイルを src に入れています。
コンポーネントのディレクトリは機能ベースで切る方針をとっています。
.
├── .next
├── public // 画像ファイルを格納する
├── src
│ ├── components // コンポーネントは機能ベースでディレクトリを切る
│ │ ├── common // 複数の機能にまたがって使用するコンポーネント
│ │ │ ├── parts // さらにコンポーネントの中で使い回せるものはpartsに切り出す
│ │ │ │ ├── Button.tsx
│ │ │ │ └── ...
│ │ │ ├── Layout.tsx
│ │ │ ├── Header.tsx
│ │ │ └── ...
│ │ ├── form // 例: フォームの機能で使用するコンポーネント
│ │ └── ...
│ ├── hooks // カスタムフックを配置する
│ ├── lib // APIを叩く処理やClassでの型定義ファイルを配置する
│ ├── pages // ページテンプレートを配置する
│ │ ├── api
│ │ │ └──hello.ts //デフォルトのやつ
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ └── index.tsx
│ └── styles
...# プロジェクトの概要
このプロジェクトは、~です。
## 使用しているパッケージ
### [`tailwindcss`](https://tailwindcss.com/)
プロジェクトのスタイリングは Tailwind CSS を使用しています。`postcss` と `autoprefixer` も一緒に使用しています。
### [`next-head-seo`](https://github.com/catnose99/next-head-seo)
catnose さんが作成した SEO カスタマイズ系の軽量パッケージです。`Layout` コンポーネントで使用しています。
# 開発に参加するまでの流れ
以下の手順を踏んで開発に参加しましょう。
## 1. `git clone`
以下のコマンドを実行してクローンします。
```shell
git clone <リポジトリの URL>
```
## 2. `npm install`
`npm install`を行います。`npm`のバージョンは Volta で固定していますが、Volta を使っていない人は、`npm -v`で 8 系かどうかを確かめます。
```shell
#npmのバージョンを確認（8系でない場合は、8系をインストール）
npm -v
#パッケージをインストール
npm install
```
## 3. `npm run dev`
`npm run dev`でローカルサーバーを立ち上げます。
```shell
npm run dev
```