<aside> 💡 Next.js 14 App Router 사용 환경에서 Ant Design 5 와 Styled-Components 를 설정하는 방법을 설명합니다.

</aside>

설치

<aside> 💡 예제 환경

• Engine: Node 18.19.0
• Package Manager: yarn 1.22.19

</aside>

1. Next.js 18 설치

# node v.18.19.0 에서 실행
npx create-next-app@latest
****# next v14.0.4 설치됨.

참고: https://nextjs.org/docs/getting-started/installation

2. antd 설치

yarn add antd styled-components @ant-design/cssinjs

3. 확인

styled-component 동작 확인을 위해 간단하게 /app/pages 경로에 글자 색상을 스타일링 해보았다.

// src/app/page.tsx

'use client';

import styled from 'styled-components'

// hotpink 글자색 적용
const CustomEl = styled.h1`
  color: hotpink;
`

export default function Home() {
  return (
    <main>
      <CustomEl>
        Get started by editing&nbsp;
        <code>src/app/page.tsx</code>
      </CustomEl>
    </main>
  )
}

적용은 되지만 css-in-js 는 런타임에서 스타일이 생성되지 않아 새로고침 시 깜빡임이 발생하는 것을 볼 수 있다. 또한 Antd 테마 토큰을 사용할 수 없다. 이를 해결하기 위해 Registry를 적용해야한다.

Theme 및 Registry 추가

1. Theme 작성

// src/themes/base.ts

const baseTheme = {
    token: {
      fontFamily: 'Arial',
      colorPrimary: 'hotpink',
			//...
    },
    components: {
			//...
    },
  };
  
export default baseTheme