2022-10-13
Posted by
最終更新: 2023-03-05
さあhello world!を実行しましょう
info
テスト環境
windows:
- windows 10 home
- python 3.9
- node 16.14.2
- npm 8.5.0
- yarn 1.22.18
mac:
- venture 13.21
- MacBook pro (M2 pro)
- python 3.11.2
- node 18.14.2
- yarn 1.22.19
pythonとnode.jsとnpmの三つは入ってる前提で進めます
長々と書いていますが下のcommandを順番に入力すると終わります
終わった場合は"フォルダー構成の確認"まで飛ばしてください
info
途中
"√ What is your project named?"と聞かれます
ファイルの名前です例では"page"と答えています
" Would you like to use ESLint with this project?"とも聞かれます
デフォルトではYesです、例でもYesと答えています
A:/abc/osaka>mkdir main
A:/abc/osaka>cd main
A:/abc/osaka/main>npx create-next-app@latest --ts
√ What is your project named? ... page
√ Would you like to use ESLint with this project? ... No / Yes
Creating a new Next.js app in A:\abc\osaka\main\page.
Using npm.
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next
added 236 packages, and audited 237 packages in 47s
78 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initializing project with template: default
Initialized a git repository.
Success! Created my-app at A:\abc\osaka\main\page
A:/abc/osaka/main>mkdir api
A:/abc/osaka/main>cd api
A:/abc/osaka/main/api>python -m venv venv
A:/abc/osaka/main/api>
apple@apple ~ % mkdir main
apple@apple ~ % cd main
apple@apple main % npx create-next-app@latest --typescript
✔ What is your project named? … page
✔ 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 /Users/apple/Documents/docs/trash/main/page.
Using npm.
Initializing project with template: default
Installing dependencies:
- react
- react-dom
- next
- 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
Initialized a git repository.
Success! Created page at /Users/apple/Documents/docs/trash/main/page
apple@apple main % mkdir api
apple@apple main % cd api
apple@apple api % python3 -m venv venv
apple@apple api %
エラーを解決する
macの場合途中以下のようなエラーが出る場合があります
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/apple/.npm/_cacache/index-v5/37/4d
npm ERR! errno EACCES
npm ERR!
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR!
npm ERR! To permanently fix this problem, please run:
npm ERR! sudo chown -R 502:20 "/Users/apple/.npm"
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/apple/.npm/_logs/2023-03-04T12_30_53_213Z-debug-0.log
この場合は以下のコマンドを実行してみてください
apple@apple main % sudo chown -R 502:20 "/Users/apple/.npm
これでも治らない場合は以下のコマンドでいけるかもしれません
apple@apple main % sudo npm cache clean --force
frontendの準備
適当な名前のfolderを作り作ったディレクトリ内で以下のcommandを実行します
info
以下のcommandはnext.jsのprojectを作成するcommandです
javascriptを使用する場合は npx create-next-app@latest で作成出来ます
今回は npx create-next-app@latest --ts を使用します一応yarnのコマンドも載せておきます
info
解説ではファイル名を
baseディレクトリ -> main
next.js -> page
flask -> api
にしています
info
先ほども言いましたが途中
"√ What is your project named?"と聞かれます
ファイルの名前です例では"page"と答えています
" Would you like to use ESLint with this project?"とも聞かれます
デフォルトではYesです、例でもYesと答えています
A:/abc/osaka/main>npx create-next-app@latest --ts
A:/abc/osaka/main>yarn create next-app --typescript
apple@apple main % npx create-next-app@latest --ts
apple@apple main % yarn create next-app --typescript
実行したら以下の二つのどちらかのようなフォルダ構成になっているはずです
main(作ったフォルダー
page(入力した名前のフォルダ
.git
node_modules
pages
public
styles
.eslintrc.json
next.config.js
next-env.d.ts
package.json
README.md
tsconfig.json
yarn.lock
main(作ったフォルダー
page(入力した名前のフォルダ
.git
node_modules
pages
public
styles
.eslintrc.json
next.config.js
next-env.d.ts
package-lock.json
package.json
README.md
tsconfig.json
これでfrontendは準備できました次はbackendを準備しましょう
backendの準備
mainディレクトリ直下にapiと言うフォルダーを作成しfolderに移動し以下のコマンドを実行してください
A:/abc/osaka/main/api>python -m venv venv
apple@apple api % python3 -m venv venv
info
因みにvenvコマンドの二つ目の引数でフォルダの名前を変えることができます
python -m venv 任意の名前
これで準備は終わりです
フォルダー構成の確認
以下のようになっていれば終了です
main
page
.git
node_modules
pages
public
styles
.eslintrc.json
next.config.js
next-env.d.ts
package.json
README.md
tsconfig.json
yarn.lock
api
venv
切りが良いのでhello, world!は次書きます
(分割しただけだけど)
このドキュメントどう?