├── .babelrc ├── .gitignore ├── README.md ├── ant-theme-vars.less ├── next.config.js ├── package.json └── pages └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "next/babel" 4 | ], 5 | "plugins": [ 6 | ["import", { 7 | "libraryName": "antd" 8 | }] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # Next.js output 61 | .next/ 62 | static/styles.css 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-ant-design) 2 | 3 | # Ant Design example 4 | 5 | ## How to use 6 | 7 | Download the example [or clone the repo](https://github.com/plxel/nextjs-ant-design-custom-theme) 8 | 9 | Install it and run: 10 | 11 | ```bash 12 | npm install 13 | npm run dev 14 | ``` 15 | 16 | ## The idea behind the example 17 | 18 | This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework. 19 | 20 | -------------------------------------------------------------------------------- /ant-theme-vars.less: -------------------------------------------------------------------------------- 1 | // ant default vars 2 | // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less 3 | @import "~antd/dist/antd.less"; 4 | 5 | @primary-color: @red-6; 6 | 7 | 8 | // @icon-url is handled in the webpack.${environment}.config and assets/styles/common/iconfonts.less files 9 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | 4 | module.exports = { 5 | webpack: (config, { dev }) => { 6 | config.module.rules.push( 7 | { 8 | test: /\.(less)/, 9 | loader: 'emit-file-loader', 10 | options: { 11 | name: 'dist/[path][name].[ext]' 12 | } 13 | }, 14 | { 15 | test: /\.less$/, 16 | loader: ExtractTextPlugin.extract({ 17 | fallback: 'style-loader', 18 | use: "css-loader!less-loader", 19 | }) 20 | // use this for development - see here https://github.com/aoc/with-ant-design-custom-theme 21 | //use: ['babel-loader', 'raw-loader', 'less-loader'] 22 | } 23 | ); 24 | 25 | config.plugins.push( 26 | new ExtractTextPlugin(__dirname + '/static/styles.css') 27 | ); 28 | 29 | return config 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-ant-design", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "next", 6 | "build": "next build", 7 | "start": "next start" 8 | }, 9 | "dependencies": { 10 | "antd": "^2.10.2", 11 | "babel-plugin-import": "^1.1.1", 12 | "next": "latest", 13 | "react": "^15.5.4", 14 | "react-dom": "^15.5.4" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "css-loader": "^0.28.4", 20 | "extract-text-webpack-plugin": "^2.1.2", 21 | "less": "^2.7.2", 22 | "less-loader": "^4.0.5", 23 | "raw-loader": "^0.5.1", 24 | "style-loader": "^0.18.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, LocaleProvider } from 'antd' 3 | import enUS from 'antd/lib/locale-provider/en_US' 4 | import stylesheet from '../ant-theme-vars.less'; 5 | const FormItem = Form.Item 6 | const Option = Select.Option 7 | 8 | /* 9 | for development you can use this instead of link to extracted css 10 |