Docker環境の構築

Dockerfile

FROM node:14.17.0
WORKDIR /usr/src/app

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: . # docker buildを実行したときのカレントディレクトリを指定
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd nextjs-blog && npm run dev"
    ports:
      - "3000:3000"

Docker環境でのNext.jsの構築

$ docker compose run --rm app npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter

Docker環境の立ち上げ

$ docker compose up

localhost:3000にアクセス

開始用テンプレートページが表示される

dOwOd

ページを編集する

nextjs-blog/pages/index.js の <h1> タグ配下の"Welcome to"というテキストを

<h1 className="title">
  Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>

↓ "Learn"に変更しファイルを保存

<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

テキストが更新されている

ページのリフレッシュをする必要がなく，アプリ開発の繰り返しを素早く行える．

dOwOd

新しいページの作成

nextjs-blog/pagesディレクトリにpostsディレクトリを作成しfirst-post.jsを作成.

first-post.js

export default function FirstPost() {
  return <h1>First Post</h1>
}

localhost:3000/posts/first-postにアクセスすると先程作成したページが表示される