こちらを参考にして構築していきます（以下）
https://qiita.com/suyamatatsuya/items/27d9efe58558f61babe6
//第①コマンド
npx create-next-app@latest//これを入れた後に出てきたもの↓
C:\Users\sae202311>npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.8
Ok to proceed? (y) y
最初から入れてみまス
Microsoft Windows [Version 10.0.22631.4037]
(c) Microsoft Corporation. All rights reserved.
C:\Users\sae202311>npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.8
Ok to proceed? (y) 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 C:\Users\sae202311\my-app.
//②↑ここでMy-appを作ってる
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
added 368 packages, and audited 369 packages in 25s
139 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Success! Created my-app at C:\Users\sae202311\my-app
念のため＾＾；エラーも掲載しておきます
C:\Users\sae202311>cd my-nextjs-app
指定されたパスが見つかりません。
C:\Users\sae202311>npm run dev
npm error code ENOENT
npm error syscall open
npm error path C:\Users\sae202311\package.json
npm error errno -4058
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\sae202311\package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:\Users\sae202311\AppData\Local\npm-cache\_logs\2024-09-06T05_12_28_247Z-debug-0.log
//これはそんなフォルダがないよと言っていますね。さっきまでの自分
C:\Users\sae202311>cd my-app//正規に入力しています・プロジェクトディレクトリに移動
C:\Users\sae202311\my-app>npm run dev//③こちらで開発サーバを走らせています
> my-app@0.1.0 dev
> next dev
▲ Next.js 14.2.8
- Local: http://localhost:3000
✓ Starting...
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
✓ Ready in 3.6s
http://localhost:3000
にアクセスしたらしっかり表示されましたうれしか泣
https://zenn.dev/cloud_ace/articles/nextjs-basics-for-non-frontend-devs
Nect.js誕生ヒストリーもあります↑
https://backlog.com/ja/git-tutorial
↑山本ティーチャーに教えていただいたGitの猿語バージョン
こちらも参考にさせていただきます♪↓
Next.js14とDjango5で作る！認証システム構築入門（死ぬほど無謀か）
https://zenn.dev/hathle/books/next-drf-auth-book/viewer/00_first
Share this content: