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

npx create-next-app ProjectName

cd project root

npm run dev

Go check browser. localhost:3000

TypeScript

npm install typescript @types/react @types/node

create your tsconfig.json file with IDE

npm run dev 

It's done. tsconfig.json & next-env.d.ts file created.

Editing tsconfig.json

Change writing strict mode False to True

"strict": false, → "strict": true, 

ESLint

npm install eslint
npx 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

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

npm install eslint-config-prettier

Editing .eslintrc.json

ADD "prettier" in to "extends":[ here ]

"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "prettier"
],

Sass

cd project root

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