[Next.js] Getting Started with VSCode

이번에는 Next.js의 개발 환경 설정을 알아보겠습니다.

Create Project

npx를 사용하여 최신 버전으로 프로젝트를 생성하겠습니다.

$ npx create-next-app@latest --ts example

Typescript를 사용하기 위하여 --ts옵션을 주었고, 저는 프로젝트 이름을 example로 했는데 이부분에 원하는 이름을 적어 주면 됩니다.

현재 (23/09/08) 기준으로 최신 버전은 v13.4.19 네요.

몇 가지 옵션을 설정해주시면 프로젝트가 생성됩니다.

참고하셔서 원하는 옵션을 선택하시면 되요.

Install Extension for VSCode

먼저 linting 도구인 ESLint를 설치해 줍니다.

기본적으로 설정은 프로젝트 생성 시 되어 있으므로 변경이 필요하시면 수정하시면 되요.

다음으로 formatting 도구인 Prettier를 설치해 줍니다.

따로 이런 저런 옵션을 설정해 줄 수도 있지만, VSCode의 설정을 통해 기본 옵션으로 바로 적용해 볼 수 있어요.

이 옵션만 설정을 해주세요.

저는 프로젝트 설정 시, TailwindCSS를 사용하겠다고 했으니 이를 도와줄 수 있는 IntelliSense도 설치해 주겠습니다.

At Rule 위반도 없애줄겸 .css 파일은 모두 tailwindcss로 연결해 줍니다.

Execute Project

프로젝트에 .vscode/launch.json 파일을 만들어 다음의 내용을 넣어주세요.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

이제, F5를 입력해 실행해보면, http://localhost:3000에 개발 서버가 실행됩니다.