Next.js 예제 템플릿으로 환경 설정하기 (Next.js, Typescript, Ant Design)

📝 프리온보딩 프론트엔드 코스 과제를 수행하며 Ant Design UI 라이브러리를 활용할 기회가 생겼다. 해당 과제를 수행하며 Ant Design 사용법을 익힐 수 있었는데 그간의 주요 내용을 기록해보고자 한다.

Ant Design 적용하기 🐜

그간의 방식

styled-components 사용이 개인적으로 익숙하기도 했고, 스타일링 해야하는 코드가 그리 많지 않아 그동안은 React + styled-component 의 조합으로 웹개발을 주로 진행해왔었다.
다만 이번 과제는 구현해야하는 기능 사항이 많은 편이였고 Ant Design 등의 UI 라이브러리를 활용해 스타일링 하는 것을 과제 요건으로도 권장하고 있었다.

React UI 라이브러리

리액트 UI 라이브러리로 고려한 옵션에는 MUI, Ant Design, Chakra 등이 있었는데, 과제 예시 이미지로 주어진 UI가 굉장히 눈에 익은 것이 Ant Design을 이용해 구현한 듯 보였다. (그래서 UI 라이브러리의 예시로 Ant Design을 언급하신 것 같다)

Ant Design으로 결정한 이유

CSS 스타일링은 주 평가 요소가 아니였지만 구현해야하는 로직이 워낙 많았기 때문에, UI 구현에 관해 발생할 수 있는 리스크를 최대한 줄이고 싶었다. 또한, 회사에서 디자인 시스템의 리액트 UI 컴포넌트들을 관리하기 위해 다양한 리액트 UI 라이브러리들을 살펴보기도 해야했기 때문에 이 기회에 Ant Design을 제대로 사용해볼 수 있으면 좋겠다는 생각으로 Ant Design을 사용하기로 했다.

Next.js 와 SSR 스타일링

프로젝트 진행과 관련해서는 Next.js, Typescript를 이용해 과제를 수행해야 한다는 조건이 있었다. 이전에 Next.js, styled-components를 이용해 회사의 웹 프로젝트 개발을 진행한적이 있었는데 Next.js 에서 styled-components를 적용하기 위해 별도의 설정 과정이 필요했던 것이 기억났다.

번거로운 설정 과정없이 빠르게 개발을 시작하고 싶어서, 이번엔 가급적 styled-components 외의 스타일링 솔루션으로 개발을 진행하고자 했다. 다행히도 Ant Design은 styled-components 기반의 UI 라이브러리는 아니라는 점을 확인했다.

Next.js 예제 템플릿 활용하기

이전에 Next.js 를 공부하면서 공식 문서와 깃 레포를 살펴봤었는데, 당시에 examples에서 ant-design 을 이용한 templete을 제공하고 있었던 것이 기억났다.

vercel > Next.js 레포지토리

https://github.com/vercel/next.js/tree/canary/examples

조금 내려가보면 with-ant-design 이라는 이름의 폴더를 찾을 수 있다.

템플릿을 이용해서 프로젝트 셋업하기

💡 아래의 명령어를 통해, Next.js + Typescript + Ant Design 프로젝트를 손쉽게 만들 수 있다.

npx create-next-app --example with-ant-design [프로젝트 이름]

package.json

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.21.5",
    "next": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "browser": {
    "fs": false,
    "path": false
  },
  "devDependencies": {
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "typescript": "4.7.4"
  }
}

tsconfig.json

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

create-next-app 스크립트를 통해 프로젝트를 생성하고 나면, ant design을 사용하기 위한 최소한의 설정이 되어있다. 해당 프로젝트가 정상 동작하는지 테스트해보자.

프로젝트 실행

yarn install // 프로젝트 실행과 관련된 패키지들을 설치
yarn build   // 프로젝트 빌드
yarn start   // 프로젝트 개발환경 실행

초기 실행 화면

아래와 같이 Ant Design을 사용하기 위한 초기 설정이 이미 완료되어 있는 모습을 확인할 수 있다

👉 이렇게 next.js에서 제공하는 example 템플릿을 이용해 간편하게 초기 설정을 마치고 개발을 이어갈 수 있었다