Next.js を勉強してみた

Next.js を勉強する

• Getting Started: Installation | Next.js

準備の準備 (optional)

nodenv で古い node しか出なかったので，node-build をupgrade しておいた

$ brew upgrade node-build
$ nodenv install -l | grep '^21'
21.0.0
21.1.0
21.2.0
21.3.0
21.4.0

(最初，nodenv を上げたけど意味がなかった)

準備

node 18.17 以降らしいので，とりあえず LTS である 20.10.0 を入れる．

$ nodenv install 20.10.0
$ NODENV_VERSION=20.10.0 nodenv exec node --version
v20.10.0

npx create-next-app@latest

なんとなく npx をローカルで実行したくなかったので，コンテナ内部で実行することにした

$ docker run -it --rm -v "$PWD:/usr/src/app" -w /usr/src/app node:20.10.0-bookworm npx create-next-app@latest
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) 
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /usr/src/app/my-app.

$ docker run -it --rm -v "$PWD:/usr/src/app" -w /usr/src/app node:20.10.0-bookworm npx create-next-app@latest my-app2 --ts --eslint --tailwind --no-src-dir --app --import-alias "@/*"

$ diff -r my-app*
diff -r my-app/node_modules/.package-lock.json my-app2/node_modules/.package-lock.json
2c2
<   "name": "my-app",
---
>   "name": "my-app2",
diff -r my-app/package-lock.json my-app2/package-lock.json
2c2
<   "name": "my-app",
---
>   "name": "my-app2",
8c8
<       "name": "my-app",
---
>       "name": "my-app2",
diff -r my-app/package.json my-app2/package.json
2c2
<   "name": "my-app",
---
>   "name": "my-app2",

$ docker run -it --rm -v "$PWD:/usr/src/app" -w /usr/src/app node:20.10.0-bookworm yarn add create-next-app@latest
$ ls package.json yarn.lock
$ cat package.json
{
  "dependencies": {
    "create-next-app": "^14.0.4"
  }
}
$ cat Dockerfile
FROM node:20.10.0-bookworm
WORKDIR /usr/src/app
COPY package.json yarn.lock /usr/src/app/
RUN yarn install
ENTRYPOINT ["npx", "create-next-app"]
$ docker build -t create-next-app .
$ docker run -it --rm -v "$PWD:/usr/src/app" create-next-app my-app3 --ts --eslint --tailwind --no-src-dir --app --import-alias "@/*"

$ diff -r my-app/node_modules/.package-lock.json my-app3/node_modules/.package-lock.json
2c2
<   "name": "my-app",
---
>   "name": "my-app3",
diff -r my-app/package-lock.json my-app3/package-lock.json
2c2
<   "name": "my-app",
---
>   "name": "my-app3",
8c8
<       "name": "my-app",
---
>       "name": "my-app3",
diff -r my-app/package.json my-app3/package.json
2c2
<   "name": "my-app",
---
>   "name": "my-app3",

Run the Development Server

$ cd my-app
$ nodenv local 20.10.0
$ nodenv exec npm run dev

スキップして…

Deploying

Static HTML Export

$ gd|cat
diff --git a/next.config.js b/next.config.js
index 767719f..ac7197d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  output: 'export',
+}
 
 module.exports = nextConfig

$ nodenv exec npm run build
$ ( cd out && python3 -m http.server 3000 )
Serving HTTP on :: port 3000 (http://[::]:3000/) ...

Refs