[React] Next.jsでブログ(会社HP)をつくるぞ！①テンプレートを選んで、ローカルで起動しよう

next.jsを使用して会社のHPを作成しています。

基本的には、こちらのexampleを利用するのが良さそうだと判断しました。

next.js/examples/blog-starter at canary · vercel/next.js

理由としては、

1. Typescriptが使用されている
2. Tailwind cssが使用されている
3. シンプルで使いやすそう

という理由で採用しました。

作成しているリポジトリはこちら

https://github.com/irori-dev/corporate-site

今回は、こちらのローカルでの環境構築を行います。

Docker環境を作成する

まずは新しいディレクトリを準備して、以下のファイルを置きます

FROM node
RUN yarn

version: '3'

services:
  app:
    build: .
    working_dir: /app
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    tty: true
    stdin_open: true
    command: yarn dev

その状態で、一度buildしておきます

docker compose build

buildが完了したら、一旦shで入ります

docker compose run app bash

そして、以下を実行してnext appを作成します

yarn create next-app --example blog-starter

色々聞かれるのでいい感じにしておきます。

package.jsonなどを含む色々ができていればいい感じです。

ここで名前を指定すると、名前のリポジトリ内に中身が全てできるので、一度そのディレクトリ外に全て持ってくるようにしておきましょう。

(defaultではmy-app内に全てできているはずです)

その状態で、コンテナを抜けた後にもう一度buildし直してみます。

docker compose build --no-cache

無事buildできたら、いよいよupしてみましょう。

docker compose up

この状態で、http://localhost:3000にアクセスして以下のような画面が表示されていたら成功です！

今日はこの辺りで。

次回はこのexampleのComponent周りの解説をしていきたいと思います。