Next.js 셋팅

Setup

npx create-next-app
# or
yarn create next-app

---

기본 Directory

• /public : 정적파일
• /pages : 라우팅
• /styles : css파일

변경 Directory

• /public : 정적파일
• /src/pages : 라우팅
• /src/styles : css파일

src Directory 

• src 디렉토리는 많은 앱에서 일반적으로 사용하며 Next.js도 지원합니다.
• /pages 디렉토리가 있는경우 /src/pages 디렉토리는 무시됩니다.
• next.config.js 같은 구성파일, /public 디렉토리는 src 디렉토리 안에서 작동하지 않습니다. 루트 디렉토리에 있어야합니다

---

TypeScript

yarn add --dev typescript @types/node @types/react @types/react-dom

설치 후 파일 확장자 변경

• js -> ts
• jsx -> tsx

yarn dev

실행하면 /tsconfig.json /next-env.d.ts 파일 2개 자동생성 및 셋팅됩니다.

---

styled-components

yarn add styled-components 
yarn add --dev @types/styled-components babel-plugin-styled-components

• @types/styled-components : 없으면 build시 error 발생
• babel-plugin-styled-components : styled-components class에 component 이름을 붙여줘서 디버깅을 용이하게 해줍니다 
  

/.babelrc 생성

{
  "presets": ["next/babel"],
  "env": {
    "development": {
      "plugins": [
        [
          "styled-components",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ]
    }
  }
}

babel-plugin-styled-components 은 dev 환경에서만 실행되도록 설정했습니다.

---

Ant Design

yarn add antd
yarn add @ant-design/icons