はじめに
turborepoを用いた開発をするときに、next.jsを使おうと思ったのですが、まぁ全くやったことなかったので何もできませんでした。
なのでここで一旦キャッチアップしてからturborepoのキャッチアップをしようと思います。
実装
dockerでnode環境を作る
まず環境を作る。
version: '3' volumes: node-modules: services: app: build: ./ volumes: - ./:/usr/local/src/ - node-modules:/usr/local/src/node_modules working_dir: /usr/local/src tty: true ports: - 3000:3000
FROM node:18.15.0-bullseye-slim
これで、起動して、コマンドでアプリを作成していく。
create-next-appコマンドで自動プロジェクト生成
next.jsのサンプルアプリ作成
これ参考
$ yarn create next-app --typescript yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "create-next-app@13.3.0" with binaries: - create-next-app ✔ What is your project named? … sample-app ✔ Would you like to use ESLint with this project? … No / Yes ✔ Would you like to use Tailwind CSS with this project? … No / Yes ✔ Would you like to use `src/` directory with this project? … No / Yes ✔ Would you like to use experimental `app/` directory with this project? … No / Yes ✔ What import alias would you like configured? … @/* Creating a new Next.js app in /usr/local/src/sample-app. Using yarn. Initializing project with template: default-tw Installing dependencies: - react - react-dom - next - typescript - @types/react - @types/node - @types/react-dom - tailwindcss - postcss - autoprefixer - eslint - eslint-config-next yarn add v1.22.19 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 238 new dependencies. info Direct dependencies ├─ @types/node@18.15.11 ├─ @types/react-dom@18.0.11 ├─ @types/react@18.0.33 ├─ autoprefixer@10.4.14 ├─ eslint-config-next@13.3.0 ├─ eslint@8.38.0 ├─ next@13.3.0 ├─ postcss@8.4.21 ├─ react-dom@18.2.0 ├─ react@18.2.0 ├─ tailwindcss@3.3.1 └─ typescript@5.0.4 info All dependencies ├─ @babel/runtime@7.21.0 ├─ @eslint-community/eslint-utils@4.4.0 ・ ・ └─ yocto-queue@0.1.0 Done in 142.29s. Success! Created sample-app at /usr/local/src/sample-app Done in 336.97s. $ yarn dev yarn run v1.22.19 $ next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry event - compiled client and server successfully in 2.4s (170 modules) wait - compiling... event - compiled successfully in 111 ms (137 modules) wait - compiling /_error (client and server)... event - compiled client and server successfully in 108 ms (171 modules) warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload wait - compiling / (client and server)... event - compiled client and server successfully in 687 ms (195 modules) warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
表示できた。
いろいろ試してみる
どうやらフォルダの階層がそのまま表示につながるらしい。
export default function View() { return <div>ここはpostsの中の詳細ページだよ</div> }
たしかに、/posts/1で表示された。
手動でnext.jsを作ってみる。
そのためにdocker-compose.ymlの修正
version: '3' volumes: node-modules-auto: node-modules-manual: services: auto-app: build: context: "./" dockerfile: "DockerfileAuto" volumes: - ./services/sample-app/:/usr/local/src/ - node-modules-auto:/usr/local/src/node_modules working_dir: /usr/local/src tty: true ports: - 3001:3000 manual-app: build: context: "./" dockerfile: "DockerfileManual" volumes: - ./services/manual-app/:/usr/local/src/ - node-modules-manual:/usr/local/src/node_modules working_dir: /usr/local/src tty: true ports: - 3002:3000
これで、manual-appのコンテナ内に入って、環境をsetupしていく。
$ yarn add next react react-dom yarn add v1.22.19 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 19 new dependencies. info Direct dependencies ├─ next@13.3.0 ├─ react-dom@18.2.0 └─ react@18.2.0 info All dependencies ├─ @next/env@13.3.0 ├─ @next/swc-linux-arm64-gnu@13.3.0 ├─ @next/swc-linux-arm64-musl@13.3.0 ├─ @swc/helpers@0.4.14 ├─ busboy@1.6.0 ├─ caniuse-lite@1.0.30001476 ├─ client-only@0.0.1 ├─ js-tokens@4.0.0 ├─ nanoid@3.3.6 ├─ next@13.3.0 ├─ picocolors@1.0.0 ├─ postcss@8.4.14 ├─ react-dom@18.2.0 ├─ react@18.2.0 ├─ scheduler@0.23.0 ├─ source-map-js@1.0.2 ├─ streamsearch@1.1.0 ├─ styled-jsx@5.1.1 └─ tslib@2.5.0 Done in 56.97s.
生成されたpackage.jsonに以下を追加
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }
これで起動してみる。
$ yarn run dev yarn run v1.22.19 warning package.json: No license field $ next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 Error: > Couldn't find a `pages` directory. Please create one under the project root at Object.findPagesDir (/usr/local/src/node_modules/next/dist/lib/find-pages-dir.js:86:19) at DevServer.getRoutes (/usr/local/src/node_modules/next/dist/server/dev/next-dev-server.js:141:59) at new Server (/usr/local/src/node_modules/next/dist/server/base-server.js:115:47) at new NextNodeServer (/usr/local/src/node_modules/next/dist/server/next-server.js:73:9) at new DevServer (/usr/local/src/node_modules/next/dist/server/dev/next-dev-server.js:100:9) at NextServer.createServer (/usr/local/src/node_modules/next/dist/server/next.js:152:24) at /usr/local/src/node_modules/next/dist/server/next.js:165:42 at async NextServer.prepare (/usr/local/src/node_modules/next/dist/server/next.js:134:24) at async Server.<anonymous> (/usr/local/src/node_modules/next/dist/server/lib/render-server.js:92:17) { type: 'Error' } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
おっと、pagesフォルダがないとだめみたい。
じゃあ作ってみっか。
export default function View() { return <div> This is manual app!</div> }
これで、起動してみる。
$ yarn run dev yarn run v1.22.19 warning package.json: No license field $ next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 It looks like you're trying to use TypeScript but do not have the required package(s) installed. Installing dependencies If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory). Installing devDependencies (yarn): - typescript - @types/react - @types/node warning package.json: No license field warning No license field [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. warning No license field success Saved 6 new dependencies. info Direct dependencies ├─ @types/node@18.15.11 ├─ @types/react@18.0.33 └─ typescript@5.0.4 info All dependencies ├─ @types/node@18.15.11 ├─ @types/prop-types@15.7.5 ├─ @types/react@18.0.33 ├─ @types/scheduler@0.16.3 ├─ csstype@3.1.2 └─ typescript@5.0.4 We detected TypeScript in your project and created a tsconfig.json file for you. Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry warning package.json: No license field event - compiled client and server successfully in 2.1s (154 modules) wait - compiling / (client and server)... event - compiled client and server successfully in 388 ms (166 modules) wait - compiling /_error (client and server)... event - compiled client and server successfully in 181 ms (167 modules) wait - compiling... event - compiled client and server successfully in 257 ms (166 modules)
おーー諸々生成されて、表示もされた！！ なお、最小単位はこれ。
manual-app/ ├── .next/ ├── node_modules/ ├── pages/ │ └── index.tsx ├── next-env.d.ts ├── package.json ├── tsconfig.json └── yarn.lock
これだけで表示してくれるのすごいな！！
キャッチアップ終わり！
