概要

HCB Advent Calendar 2021
アドベントカレンダー2日目の記事になります。

Nextを触ってみたことなかったので、Advent Calenderを期に触ってみました。
触ってみるついでに、Reactしか触ったことがない人に向けて、Nextを触ってない人へ向けてのドキュメントを残したいと思います。

以下の構成で記事を書いていきます。

• プロジェクトの作り方
• 書き方

プロジェクトの作り方

次の構成で説明します

• インストール編
• ディレクトリ構成

インストール編

無駄に？docker-composeでやってみます。

以下のコマンドでインストールしていきます。
ターミナル等で作業フォルダを作成したいところに移動した想定で行きます。

mkdir 作業フォルダ名
cd 作業フォルダ名

ここでdocker-composeの環境を作るためにdocker-compose.ymlとDockerfileを作業フォルダの中に作成します。

docker-compose.yml

version: '3' # docker-composeのバージョン
services:
  app:
    build:
      # イメージを作るためのDockerfileがある場所
      context: . # Dockerfileのある場所
      dockerfile: Dockerfile
    volumes:
      # ローカルのデータにコンテナのデータをマウントする。
      - ./:/usr/src/app
    working_dir: /usr/src/app/nextアプリフォルダ名 # デフォルトの作業ディレクトリを指定
    environment:
      - CHOKIDAR_USEPOLLING=true # docker環境の中でホットリロードを有効にします。
    command: sh -c "npm run dev" # シェルの起動およびコマンドの実行
    ports:
      - "3000:3000" # 左がローカル、右がDocker内のポート

Dockerfile

FROM node:14.17.0
WORKDIR /usr/src/app

作成したら作業フォルダの中で以下のコマンドを実行します。

1. docker-compose run --rm app sh -c "cd /usr/src/app && npm install create-next-app"
    // docker-compose run は npm install の実行をappに指示している。
    // --rm オプションは実行終了時にコンテナを削除する命令となっている。
2. docker-compose run --rm app sh -c "cd /usr/src/app && npx create-next-app nextアプリフォルダ名 --ts"    // nextアプリを作成
3. dpcker-compose up -d
    // dockerをバックグラウンドで起動

なんと、ここまでほぼDockerとdocker-composeしか出てない。
普通にnextを使うなら npx create-next-app nextアプリフォルダ名 --ts でOK。

ディレクトリ構成

次にディレクトリ構成です。
自分的には以下の構成がいいかなと感じています。

src
├─components
│  ├─atoms
│  ├─molecules
│  ├─organisms
│  └─stores
├─models
├─pages
│  ├─second-page
│  └─third-pages
├─re-ducks
│  ├─post
│  └─user
├─styles
└─templates

普段Atomic Designに沿って書いているのですが、pagesがすでにあるのでどんなフォルダ構成にするのか自身がありません（にわか）。templateをcomponentsに突っ込むことに違和感を覚えたので、外に出しました。

素で（create-next-appした時の状態）でpagesの下にapiがあり、簡易的なapiが作れるようになっていたのですが、特段メリットを感じなかったので削除しました。（フロントとバックエンドは分割したい派）
SSRとかSSGとかやる関係上でああいう構成になったんですかね？（無知）

開発

次の構成で説明します。

• 作業の仕方 (docker-compose使ってるので、補足の説明)
• 書き方

作業の仕方

packageのインストールの仕方
docker-compose run app npm install --save package名
ビルドの仕方
docker-compose run app npm run build

書き方

基本

Reactそのまんまで良さそうです。
素でreactパッケージが入ってるので、useEffect や useState も入っていて、React.FC 等の型も普通に使えます。
エクスポートとかコンポーネントのインポートもまんま同じなのでReact書いたことある人なら大丈夫だと思います。（省略）

import Huga from "component/molecules/Huga";

const Hoge:React.FC = () => {
  return (
    <div>
      <Huga label="hugaだを"/>
    </div>
  );
};

export default Hoge;

pageに関して

nextの特徴的な部分としてルーティングをpagesフォルダに突っ込むと勝手にやってくれる（良くも悪くも）ので注意が必要です。
pages内のフォルダ名や、はファイル名(indexを除く)を baseUrl/フォルダ名/ファイル名 みたいな形でルーティングしてくれます。
かなり嬉しいですね。
パスパラメータをとりたいときは、ファイル名を [パスパラメータの変数名].tsx とすると以下のような形でパスパラメータを受け取ることが出来ます。ちなみにフォルダ名を [パスパラメータの変数名] として、index.tsxを中に入れても同様に機能します。

import { useRouter } from "next/router";

const Hoge:React.FC = () => {
  const router = useRouter();  // パスパラメータから値を取得
  const { パスパラメーター変数名 } = router.query;
  return (
    <div>
      {パスパラメーター変数名}
    </div>
  );
};

export default Hoge;

まとめ

以上、駆け足もいいところな具合で説明を省きながら、Reactが触れる人向けのNextの始め方を書いていきました。自分で勉強しながらだったので、まだまだ把握しきれないところがあります。今後ちゃんと理解してまとめ記事を書こうと思います。

明日のAddvent calenderは Kaito Kudo が「iOSアプリを公開するまでの流れ(備忘録)」というタイトルで記事を書くので、是非そちらも見てください。 m ( _ _ ) m