公式サイトに沿ってセットアップしていきます。
TypeScriptを使いたいので--typescriptをつけて実行します。
% npx create-next-app@latest --typescriptプロジェクト名はhello-nextjs、src/ディレクトリはYes、app/は好みで（よく分からなければNo）、他はすべてデフォルトを選択します。
Need to install the following packages:
create-next-app@latest
Ok to proceed? (y) y
✔ What is your project named? … hello-nextjs
✔ Would you like to use ESLint 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 /xxx/tmp/hello-nextjs.
Using npm.
Installing dependencies:
- react
- react-dom
- next
- @next/font
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next
added 270 packages, and audited 271 packages in 1m
102 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initializing project with template: default
Initialized a git repository.
Success! Created hello-nextjs at /xxx/hello-nextjs/xxx/hello-nextjsというディレクトリが作成されましたね。
プロジェクトディレクトリに移動して早速起動します。
% cd hello-nextjs
% yarn dev
yarn run v1.22.17
warning ../../package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 962 ms (165 modules)http://localhost:3000/ を開くと無事起動されてますね。
かっこいい…
補足
設定ファイルとソースコードが混ざらないようにsrc/ディレクトリを使う選択をしました（参考）。
コメント