[NextJS] Next.js 초기 셋팅하기

Next.js 초기 셋팅하기

1. Node.js 프로젝트 초기화

npm init -y

 

 

 

2. 프로젝트의 오픈 소스 라이선스를 MIT 라이선스로 설정

// package.json
{
  "name": "nextjs-bestseller",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

 

 

3. Next.js & React & React-dom 설치

• ❗Next.js는 TypeScript 지원을 내장하고 있어서 .tsx 파일을 만들면 자동으로 TypeScript 관련 설정을 도와준다.

npm install react@latest next@latest react-dom@latest

 

 

3-1. 자동 설치가 안될 시 

npm install react@latest next@latest react-dom@latest typescript @types/react @types/react-dom

 

 

3-2. tsconfig.json 생성 (자동 생성이 안될 시)

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

 

 

 

4. scripts 명령어 수정

  "scripts": {
    "dev": "next dev"
  },

 

 

 

5. app 폴더 및 page.tsx 파일 생성

 

---

 

All Courses – 노마드 코더 Nomad Coders