Getting Started | Next.js
Settings to do after creating a project
Install set up in OS
・Node.js ( global npm ) ・Visual Stuidio Code ( IDE )
Create Project
1npx create-next-app ProjectName
cd project root
1npm run dev
Go check browser. localhost:3000
TypeScript
1npm install typescript @types/react @types/node
create your tsconfig.json file with IDE
1npm run dev
It's done. tsconfig.json & next-env.d.ts file created.
Editing tsconfig.json
Change writing strict mode False to True
1"strict": false, → "strict": true,
ESLint
1npm install eslint
2npx eslint --init
No1 : 2 check syntax and find problems
No2 : 1 JavaScript modules (import/export)
No3 : 3 None of these
No4 : yes (y)
No5 : 2 Node
No6 : 3 JSON
it's done. eslintrc.json file created.
Prettier
IDE Plugin Install with Prettier - Code fomatter
command type Ctrl + , ←(conmma)
Search [ On Save ]
Select your Project Folder
Editor: Format On Save Check ON
.vscode
ADD to setting.json
1{
2 "editor.defaultFormatter": "esbenp.prettier-vscode",
3 "editor.formatOnSave": true
4}
1npm install eslint-config-prettier
Editing .eslintrc.json
ADD "prettier" in to "extends":[ here ]
1"extends": [
2 "eslint:recommended",
3 "plugin:@typescript-eslint/recommended",
4 "prettier"
5],
Sass
cd project root
1npm install sass
IDE Plugin install
・Wakatime (Work Time Log)
・Git History (Git Log)
・Live Server (HTML preview in browser)
・{Country} Language Pack ([email protected])
successful
All you have to do is edit & create it...
