September 22, 2017

Next.js 添加 Ant Design

Next.js 是一个简单而强大基于 React 的 JavaScript 库，而 Ant Design 提供了一整套 UI/UX 解决方案，非常适合网站的快速开发。这里介绍使用 create-next-app 创建 Next.js 应用并添加 Ant Design。

Next.js 是一个简单而强大基于 React 的 JavaScript 库，而 Ant Design 提供了一整套 UI/UX 解决方案，非常适合网站的快速开发。

这里介绍使用 create-next-app 创建 Next.js 应用并添加 Ant Design。

本文源码参见：next-antd-app

创建 Next.js 应用

create-next-app next-ant-app

添加 Babel 配置

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "module-resolver", {
      "root": ["."],
      "alias": {
        "styles": "./styles"
      },
      "cwd": "babelrc"
    }],
    ["import", { "libraryName": "antd" }]
  ],
  "ignore": []
}

修改 next.config.js

next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(less)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      },
      {
        test: /\.less$/,
        use: ['babel-loader', 'raw-loader', 'less-loader']
      }
    );
    return config;
  },
};

安装依赖

yarn add babel-plugin-import
yarn add less-loader
yarn add raw-loader
yarn add less
yarn add antd
yarn add postcss-loader

修改 postcss 配置

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-easy-import')({prefix: '_'}), // keep this first
    require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too
  ]
}

添加 Less 文件

index.less

+@import "~antd/dist/antd.less";

修改主页

index.js

import Head from '../components/head'
import stylesheet from '../styles/index.less'

import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

export default () => (
  <Layout>
    <Head title="Home" />
    <Header className="header">
      <div className="logo" />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
      </Breadcrumb>
      <Layout style={{ padding: '24px 0', background: '#fff' }}>
        <Sider width={200} style={{ background: '#fff' }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          >
            <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
              <Menu.Item key="1">option1</Menu.Item>
              <Menu.Item key="2">option2</Menu.Item>
              <Menu.Item key="3">option3</Menu.Item>
              <Menu.Item key="4">option4</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
              <Menu.Item key="5">option5</Menu.Item>
              <Menu.Item key="6">option6</Menu.Item>
              <Menu.Item key="7">option7</Menu.Item>
              <Menu.Item key="8">option8</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
              <Menu.Item key="9">option9</Menu.Item>
              <Menu.Item key="10">option10</Menu.Item>
              <Menu.Item key="11">option11</Menu.Item>
              <Menu.Item key="12">option12</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280 }}>
          Content
        </Content>
      </Layout>
    </Content>
    <Footer style={{ textAlign: 'center' }}>
      Ant Design ©2016 Created by Ant UED
    </Footer>

    <style jsx>{`

    `}</style>

    <style jsx global>{ stylesheet }</style>
  </Layout>
)