0%

next.js + typescript + antd

저번에 만든 next.js 프로젝트를 버리고 다시 셋팅을 한다.

이번에는 next.js + typescript + antd 를 적용해보려 한다.

이 3개중 뭐 하나도 재대로 아는게 아니라 프로젝트 설정 자체가 힘들었다.

실습

next.js 프로젝트 생성

cra처럼 next.js도 보일러플레이트 프로젝트를 생성하는 명령어 create-next-app 이 있다.

1
npx create-next-app 프로젝트명

1

next.js에 typescript 적용

생성된 폴더를 webstorm으로 열고 root 경로에 tsconfog.json 파일을 생성한다.

2

그리고 아래 명령어로 typescript관련 모듈을 설치한다.

1
npm install --save-dev typescript @types/react @types/node

3

pages 폴더 내부에 _app.js 와 index.js 파일이 있을 것이다.

해당 파일들의 확장자를 tsx로 변경해준다.

4

아래 명령어로 next.js를 개발모드로 실행한다.

1
npm run dev

5

next.js가 실행되면서 위 빨간줄 처럼 tsconfig.json 파일을 인식해서 디폴트 셋팅을 tsconfig.json에 해준다.

브라우저로 접근하면 정상동작 하는 것을 볼 수 있다.

6

7

tsconfig.json 파일을 열어보면, 자동으로 위처럼 내용이 채워진 것을 확인 할 수있다.

나도 typescript는 잘 몰라서 어떤 설정인지 잘 모른다.

typescript가 정상적으로 동작하는지 확인해보기 위해서, strict 설정을 잠시 true로 변경하고 pages폴더의 _app.tsx 폴더를 열어보자.

아래처럼 MyApp의 Props에 빨간줄이 처지면서 webstorm에서 자동으로 typescript문법 검사를 하고 있는 것을 볼 수 있다.

난 처음에 typescript가 동작하는지 않하는지 몰라서 webstorm에 별도의 설정을 해줘야 하는줄 알았다. next.js에서 자동으로 생성해주는 tsconfig.json의 strick 값이 false여서 webstorm에 빡세개 검사를 하지 않았던 것이었다.

Typescript가 다들 좋다고 하는데, 개인적인 생각으로는 이런 통일성없는 문법체크설정이 존재하는것 자체가 문제가 있다고 본다.

8

자 여기까지 next.js 와 typescript 설정이 끝났다.

next.js 에 atnd(앤트디자인) 적용

여기서 좀 많이 해맸다. 20210515기준 next.js 버전은 10버전이다. 뭔가 webpack 최신버전과 충돌이 있어서 삽질을 많이 했다.

일단 antd를 설치한다.

1
yarn add antd

9

그리고 styles폴더에 antd.less 파일을 생성하고 아래 내용을 채운다.

주석이 살아 있는 것은 antd의 메인컬러설정으로 빨강으로 정했다.

나머지는 다 주석으로 일부로 처리했다.(나중에 사용할수 있으므로 참고용으로 나둔다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@import "~antd/dist/antd.less";

@primary-color: #c02428; // 매인 색 빨강
//@primary-color: #000; // primary color for all components
//@link-color: #1890ff; // link color
//@success-color: #52c41a; // success state color
//@warning-color: #faad14; // warning state color
//@error-color: #f5222d; // error state color
//@font-size-base: 14px; // major text font size
//@heading-color: rgba(0, 0, 0, 0.85); // heading text color
//@text-color: rgba(0, 0, 0, 0.65); // major text color
//@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
//@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
//@border-radius-base: 4px; // major border radius
//@border-color-base: #d9d9d9; // major border color
//@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

10

pages폴더의 _app.tsx 파일에 globall.css를 주석처리하고 방금 생성한 antd.less를 import 한다.

_app.tsx는 next.js의 엔트리 포인트 파일로 공통적일 설정을 해당 파일에서 한다.

antd.less 파일에 설정으로 antd의 전체적인 테마를 설정 할수 있게 된 것이다.

11

아래 명령으로 next.js에서 css, less, sass 등 파일을 인식할 수 있게 도와주는 라이브러리를 추가하자.(webpack이나 babel을 잘 몰라서 정확한 것은 아니나 antd적용을 위해 필요한 라이브러리 인듯 하다.)

1
npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

pages폴더의 index.tsx 파일을 아래처럼 수정해주자.

antd의 Button 컴포넌트를 사용해서 antd가 정상동작하고 앞서 설정한 메인색상(빨강)이 동작하는지 확인하기 위해서이다.

1
2
3
4
5
6
7
8
9
import {Button} from "antd";

export default function Home() {
return (
<div>
<Button type="primary">Antd 버튼</Button>
</div>
)
}

12

그리고 root 폴더 경루에 next.config.js 폴더를 생성한다.

내용을 아래처럼 채워주자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

const isProd = process.env.NODE_ENV === "production";

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
require.extensions[".less"] = (file) => {};
}

module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
...withLess(
withSass({
lessLoaderOptions: {
javascriptEnabled: true,
},
})
),
});

13

npm run dev 를 실행해서 다시 동작시키면 동작이 되어야 하는데…

아래처럼 webpack의 모듈이 없다고 오류가 난다.

1
Error: Cannot find module 'webpack/lib/node/NodeTempaltePlugin'

14

아무 생각없이 그냥 최신 webpack을 설치해 봤는데, 역시 다른 오류가 난다.

webpack@4.44.1 를 설치하자. next.js 10버전에서 webpack관련 이슈가 있어보인다.

1
npm i webpack@4.44.1

15

다시 npm run dev를 하면….

또 오류가 난다. @zeit/next-sass ??? 이건 앞서 설치한건데?

다시 설치해주자.

16

다시 npm run dev를 하면….

@zeit/next-less??? 이것도 설치한건데???

17

그냥 또다시 설치해준다.

18

설치 중에 webstorm에서 디펜던시를 update하라고 한다. 해주자.

예상으로는 webpack이 설치되면서 뭔가 모듈간의 의존성에 변경? 문제가 발생한거 같다.

19

디펜던시가 완료된뒤 다시 npm run dev를 실행하면 아래처럼 antd가 정상동작하는 것을 확인 할 수 있다.

하… 프로젝트 셋팅 개빡세

20

혹시나 해서 package.json 파일을 남겨놓는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
"name": "ml-speedmaster-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@zeit/next-css": "^1.0.1",
"@zeit/next-less": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"antd": "^4.15.5",
"babel-plugin-import": "^1.13.3",
"less": "^4.1.1",
"next": "10.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"webpack": "^4.44.1"
},
"devDependencies": {
"@types/node": "^15.3.0",
"@types/react": "^17.0.5",
"typescript": "^4.2.4"
}
}

참고자료

https://nextjs.org/learn/excel/typescript/create-tsconfig

https://dev.to/burhanuday/using-ant-design-with-nextjs-custom-variables-for-ant-design-57m5

https://velog.io/@jakeseo_me/다시-프론트-틀잡기-2-next에-antd-설치하기

https://github.com/vercel/next.js/issues/21721