Getting Started | Next.js

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...