🌱
Next.jsのプロジェクトを作成する
フロントエンドの勉強をしたいと思い、Next.jsのプロジェクトを作成しました。
今回はTypeScriptの使用を選択しています。
$ npx create-next-app@latest --typescript
Need to install the following packages:
create-next-app@latest
Ok to proceed? (y) y
✔ What is your project named? … my-app
Creating a new Next.js app in /Users/path/my-app.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
yarn add v1.22.17
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.17".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 16 new dependencies.
info Direct dependencies
├─ next@12.2.5
├─ react-dom@18.2.0
└─ react@18.2.0
info All dependencies
├─ @next/env@12.2.5
├─ @next/swc-darwin-x64@12.2.5
├─ @swc/helpers@0.4.3
├─ caniuse-lite@1.0.30001388
├─ js-tokens@4.0.0
├─ nanoid@3.3.4
├─ next@12.2.5
├─ 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
├─ styled-jsx@5.0.4
├─ tslib@2.4.0
└─ use-sync-external-store@1.2.0
✨ Done in 45.84s.
Installing devDependencies:
- eslint
- eslint-config-next
- typescript
- @types/react
- @types/node
- @types/react-dom
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 160 new dependencies.
info Direct dependencies
├─ @types/node@18.7.14
├─ @types/react-dom@18.0.6
├─ @types/react@18.0.18
├─ eslint-config-next@12.2.5
├─ eslint@8.23.0
└─ typescript@4.8.2
info All dependencies
├─ @babel/runtime-corejs3@7.18.9
├─ @babel/runtime@7.18.9
├─ @eslint/eslintrc@1.3.1
├─ @humanwhocodes/config-array@0.10.4
├─ @humanwhocodes/gitignore-to-minimatch@1.0.2
├─ @humanwhocodes/module-importer@1.0.1
├─ @humanwhocodes/object-schema@1.2.1
├─ @next/eslint-plugin-next@12.2.5
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @rushstack/eslint-patch@1.1.4
├─ @types/json5@0.0.29
├─ @types/node@18.7.14
├─ @types/prop-types@15.7.5
├─ @types/react-dom@18.0.6
├─ @types/react@18.0.18
├─ @types/scheduler@0.16.2
├─ @typescript-eslint/parser@5.36.1
├─ @typescript-eslint/scope-manager@5.36.1
├─ @typescript-eslint/typescript-estree@5.36.1
├─ acorn-jsx@5.3.2
├─ acorn@8.8.0
├─ ajv@6.12.6
├─ ansi-regex@5.0.1
├─ ansi-styles@4.3.0
├─ argparse@2.0.1
├─ aria-query@4.2.2
├─ array-union@2.1.0
├─ array.prototype.flat@1.3.0
├─ array.prototype.flatmap@1.3.0
├─ ast-types-flow@0.0.7
├─ axe-core@4.4.3
├─ axobject-query@2.2.0
├─ balanced-match@1.0.2
├─ brace-expansion@1.1.11
├─ braces@3.0.2
├─ callsites@3.1.0
├─ chalk@4.1.2
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ concat-map@0.0.1
├─ core-js-pure@3.25.0
├─ cross-spawn@7.0.3
├─ csstype@3.1.0
├─ damerau-levenshtein@1.0.8
├─ deep-is@0.1.4
├─ dir-glob@3.0.1
├─ emoji-regex@9.2.2
├─ es-to-primitive@1.2.1
├─ escape-string-regexp@4.0.0
├─ eslint-config-next@12.2.5
├─ eslint-import-resolver-typescript@2.7.1
├─ eslint-module-utils@2.7.4
├─ eslint-plugin-import@2.26.0
├─ eslint-plugin-jsx-a11y@6.6.1
├─ eslint-plugin-react-hooks@4.6.0
├─ eslint-plugin-react@7.31.4
├─ eslint-scope@7.1.1
├─ eslint-utils@3.0.0
├─ eslint@8.23.0
├─ esquery@1.4.0
├─ esrecurse@4.3.0
├─ estraverse@5.3.0
├─ fast-deep-equal@3.1.3
├─ fast-glob@3.2.11
├─ fast-json-stable-stringify@2.1.0
├─ fast-levenshtein@2.0.6
├─ fastq@1.13.0
├─ file-entry-cache@6.0.1
├─ fill-range@7.0.1
├─ find-up@5.0.0
├─ flat-cache@3.0.4
├─ flatted@3.2.7
├─ function.prototype.name@1.1.5
├─ functional-red-black-tree@1.0.1
├─ get-symbol-description@1.0.0
├─ glob-parent@6.0.2
├─ glob@7.2.3
├─ grapheme-splitter@1.0.4
├─ has-bigints@1.0.2
├─ has-flag@4.0.0
├─ import-fresh@3.3.0
├─ imurmurhash@0.1.4
├─ is-bigint@1.0.4
├─ is-boolean-object@1.1.2
├─ is-callable@1.2.4
├─ is-core-module@2.10.0
├─ is-date-object@1.0.5
├─ is-extglob@2.1.1
├─ is-negative-zero@2.0.2
├─ is-number-object@1.0.7
├─ is-number@7.0.0
├─ is-regex@1.1.4
├─ is-shared-array-buffer@1.0.2
├─ is-string@1.0.7
├─ is-symbol@1.0.4
├─ is-weakref@1.0.2
├─ isexe@2.0.0
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ json5@1.0.1
├─ jsx-ast-utils@3.3.3
├─ language-subtag-registry@0.3.22
├─ language-tags@1.0.5
├─ locate-path@6.0.0
├─ lodash.merge@4.6.2
├─ lru-cache@6.0.0
├─ merge2@1.4.1
├─ micromatch@4.0.5
├─ minimist@1.2.6
├─ ms@2.1.2
├─ natural-compare@1.4.0
├─ object-assign@4.1.1
├─ object-inspect@1.12.2
├─ object.assign@4.1.4
├─ object.entries@1.1.5
├─ object.fromentries@2.0.5
├─ object.hasown@1.1.1
├─ optionator@0.9.1
├─ p-limit@3.1.0
├─ p-locate@5.0.0
├─ parent-module@1.0.1
├─ path-exists@4.0.0
├─ path-key@3.1.1
├─ path-type@4.0.0
├─ picomatch@2.3.1
├─ prop-types@15.8.1
├─ punycode@2.1.1
├─ queue-microtask@1.2.3
├─ react-is@16.13.1
├─ regexp.prototype.flags@1.4.3
├─ regexpp@3.2.0
├─ resolve-from@4.0.0
├─ reusify@1.0.4
├─ rimraf@3.0.2
├─ run-parallel@1.2.0
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ slash@3.0.0
├─ string.prototype.matchall@4.0.7
├─ string.prototype.trimend@1.0.5
├─ string.prototype.trimstart@1.0.5
├─ strip-ansi@6.0.1
├─ strip-bom@3.0.0
├─ strip-json-comments@3.1.1
├─ supports-color@7.2.0
├─ text-table@0.2.0
├─ to-regex-range@5.0.1
├─ tsutils@3.21.0
├─ type-check@0.4.0
├─ type-fest@0.20.2
├─ typescript@4.8.2
├─ unbox-primitive@1.0.2
├─ uri-js@4.4.1
├─ which-boxed-primitive@1.0.2
├─ which@2.0.2
├─ word-wrap@1.2.3
├─ yallist@4.0.0
└─ yocto-queue@0.1.0
✨ Done in 49.29s.
Initialized a git repository.
Success! Created my-app at /Users/path/my-app
$ tree -I node_modules
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│ ├── _app.tsx
│ ├── api
│ │ └── hello.ts
│ └── index.tsx
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
├── tsconfig.json
└── yarn.lock
$ cd my-app
$ npm run dev
下記から確認できます。
Discussion