Next.js에 Ant Design을 도입하는 방법

이 게시물에서는 비즈니스 앱 화면을 만드는 데 유용한 UI 구성 요소 라이브러리 "Ant Design"을 Next.js에 도입하는 단계를 설명합니다. 언어는 TypeScript를 사용합니다. 이 절차에서는 관리 화면의 병아리를 만드는 곳까지 합니다.

이 절차에서 만드는 코드의 완성형은 GitHub에서 볼 수 있습니다.

동작 데모는 이쪽을 참조하십시오.

Next.js 프로젝트 생성

먼저 다음 명령을 사용하여 Next.js 프로젝트를 만듭니다.

mkdir nextjs-ant-design-typescript
cd nextjs-ant-design-typescript
npx create-next-app --ts .

Next.js 개발 서버 시작

다음 명령을 실행하여 개발 서버를 시작할 수 있다면 OK입니다.

yarn dev

Ant Design 패키지 설치

그런 다음 Ant Design 패키지를 설치합니다.

yarn add antd

관리 화면 레이아웃 만들기

관리 화면의 레이아웃을 구현합니다.

layouts/adminLayout.tsx를 만들고 내용을 다음과 같이 만듭니다.

layouts/adminLayout.tsx

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu } from "antd";
import { ReactNode, useState } from "react";
import styles from "./adminLayout.module.css";

const { Header, Sider, Content } = Layout;

function AdminLayout({ children }: { readonly children: ReactNode }) {
  const [collapsed, setCollapsed] = useState<boolean>(false);

  function toggle() {
    setCollapsed(!collapsed);
  }

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className={styles.logo} />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
          <Menu.Item key="1" icon={<UserOutlined />}>
            nav 1
          </Menu.Item>
          <Menu.Item key="2" icon={<VideoCameraOutlined />}>
            nav 2
          </Menu.Item>
          <Menu.Item key="3" icon={<UploadOutlined />}>
            nav 3
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className={styles.siteLayoutBackground} style={{ padding: 0 }}>
          {collapsed ? (
            <MenuUnfoldOutlined className={styles.trigger} onClick={toggle} />
          ) : (
            <MenuFoldOutlined className={styles.trigger} onClick={toggle} />
          )}
        </Header>
        <Content
          className={styles.siteLayoutBackground}
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}

export default AdminLayout;

관리 화면 레이아웃을위한 CSS 모듈도 layouts/adminLayout.module.css에 만듭니다.

layouts/adminLayout.module.css

.trigger {
    padding: 0 24px;
    font-size: 18px;
    line-height: 64px;
    cursor: pointer;
    transition: color 0.3s;
}

.trigger:hover {
    color: #1890ff;
}

.logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.siteLayoutBackground {
    background: #fff;
}

Ant Design의 글로벌 CSS 가져오기

Ant Design의 글로벌 CSS를 pages/_app.tsx에서 import

import 'antd/dist/antd.css';

관리 화면 레이아웃을 페이지에서 사용

이번에는 개별 페이지를 만들고 거기에서 관리 화면 레이아웃을 사용합니다.

pages/index.tsx가 코드 생성으로 만들어졌으므로 내용을 다음 코드로 완전히 바꿉니다.

import dynamic from "next/dynamic";

const AdminLayout = dynamic(() => import("../layouts/adminLayout"), {
  ssr: false,
});

export default function Home() {
  return <AdminLayout>コンテンツ</AdminLayout>;
}

dynamic 에서 import 하는 것은 Ant Design의 Layout 컴퍼넌트가 의존하는 컴퍼넌트로 useLayoutEffect 가 사용되고 있기 (위해)때문에입니다. SSR을 비활성화해야 합니다. 다음의 이슈가 고칠 때까지의 대처법입니다.

Select mode="multiple" throws useLayoutEffect warning in Next.js · Issue #30396 · ant-design/ant-design

다음과 같은 외모가되면 OK입니다.