Next.js を勉強してみた

# Next.js を勉強する

- [Getting Started: Installation | Next.js](https://nextjs.org/docs/getting-started/installation)

## 準備の準備 (optional)

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

```shell-session
$ 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`

https://nextjs.org/docs/pages/api-reference/create-next-app

なんとなく 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
$ 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",
```

```shell-session
$ 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
$ 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

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

## スキップして…

## Deploying

### Static HTML Export

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

```diff_javascript
$ 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
```

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

## Refs

https://github.com/nodenv/nodenv#choosing-the-node-version

https://www.geeklibrary.jp/counter-attack/npx/

https://ja.stackoverflow.com/questions/90628/docker-npx-create-react-app-%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

https://zenn.dev/teppeis/articles/2021-05-corepack