├── .babelrc ├── .gitignore ├── README.md ├── assets └── antd-custom.less ├── components └── Textbox.js ├── next.config.js ├── now.json ├── package.json ├── pages ├── _document.js └── index.js ├── static └── images │ ├── big-images-2.jpg │ ├── big-images-3.jpg │ ├── big-images.jpg │ ├── burger1.jpg │ ├── burger2.jpg │ ├── burger3.jpg │ ├── burger4.jpg │ └── section-1.png └── style.less /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [ 4 | [ 5 | "import", { 6 | "libraryName": "antd", 7 | "style": true 8 | }, 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | .next 4 | .vscode 5 | build 6 | coverage 7 | node_modules 8 | npm-debug* 9 | out 10 | yarn-debug* 11 | yarn-error* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project we created a simple project with Nextjs and use Ant Design for CSS components and also deploy that with Now.sh 2 | 3 | https://nextjs-antd-custom.autsakorn.now.sh 4 | -------------------------------------------------------------------------------- /assets/antd-custom.less: -------------------------------------------------------------------------------- 1 | @primary-color: #ff4c3b; 2 | 3 | @layout-header-height: 51px; 4 | @layout-header-padding : 0px 0px; 5 | @layout-header-background : #f8f8f8; 6 | @layout-body-background: #ffffff; 7 | @layout-footer-padding : 0px; 8 | 9 | @border-radius-base: 2px; 10 | 11 | @collapse-content-bg: #ffffff; 12 | -------------------------------------------------------------------------------- /components/Textbox.js: -------------------------------------------------------------------------------- 1 | export default () => ( 2 |
3 | ); 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const { PHASE_PRODUCTION_SERVER } = 2 | process.env.NODE_ENV === 'development' 3 | ? {} // We're never in "production server" phase when in development mode 4 | : !process.env.NOW_REGION 5 | ? require('next/constants') // Get values from `next` package when building locally 6 | : require('next-server/constants'); // Get values from `next-server` package when building on now v2 7 | 8 | module.exports = (phase, { defaultConfig }) => { 9 | if (phase === PHASE_PRODUCTION_SERVER) { 10 | // Config used to run in production. 11 | return {}; 12 | } 13 | 14 | /* eslint-disable */ 15 | const withLess = require('@zeit/next-less') 16 | const lessToJS = require('less-vars-to-js') 17 | const fs = require('fs') 18 | const path = require('path') 19 | 20 | // Where your antd-custom.less file lives 21 | const themeVariables = lessToJS( 22 | fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8') 23 | ) 24 | 25 | // fix: prevents error when .less files are required by node 26 | if (typeof require !== 'undefined') { 27 | require.extensions['.less'] = file => {} 28 | } 29 | 30 | return withLess({ 31 | lessLoaderOptions: { 32 | javascriptEnabled: true, 33 | modifyVars: themeVariables // make your antd custom effective 34 | } 35 | }) 36 | }; 37 | 38 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "builds": [ 4 | { "src": "package.json", "use": "@now/next" } 5 | ] 6 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-antd-custom", 3 | "version": "1.0.0", 4 | "author": "autsakorn", 5 | "scripts": { 6 | "dev": "next", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "antd": "^3.12.1", 12 | "babel-plugin-import": "^1.7.0", 13 | "less": "^2.7.3", 14 | "less-vars-to-js": "1.3.0", 15 | "react": "^16.7.0", 16 | "react-dom": "^16.7.0" 17 | }, 18 | "license": "ISC", 19 | "devDependencies": { 20 | "@zeit/next-less": "^1.0.1", 21 | "next": "^7.0.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Head, Main, NextScript } from 'next/document'; 2 | 3 | export default class MyDocument extends Document { 4 | render() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | ) 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | Breadcrumb, 3 | Icon, 4 | Row, 5 | Col, 6 | Layout, 7 | Card, 8 | Carousel, 9 | } from 'antd'; 10 | import Link from 'next/link' 11 | import "../style.less"; 12 | 13 | const { 14 | Header, Content, 15 | } = Layout; 16 | 17 | export default () => ( 18 | 19 |
20 | 21 | 22 | 23 | 24 | Welcome to ABC Burger 25 | 26 | 27 | Call us 09-999-9999 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 |
37 | 38 | 39 | Home 40 | 41 | 42 |
43 |
44 | 45 | 46 | Product 47 | 48 | 49 |
50 |
51 | 52 | 53 | About us 54 | 55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | Home 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | 79 |
80 |

81 | 82 |

83 |
84 |
85 |

86 | 87 |

88 |
89 |
90 |

91 | 92 |

93 |
94 | 95 |
96 | 97 | 98 | 102 | } 103 | > 104 | 108 | 109 | 110 | 111 | } 115 | > 116 | 120 | 121 | 122 | 123 | } 127 | > 128 | 132 | 133 | 134 | 135 | } 139 | > 140 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 |
154 | © 2019 nextjs antd now.sh 155 |
156 | 157 | 158 |
159 | 160 | 161 | 162 |
163 | 164 | 165 | 166 | ) 167 | -------------------------------------------------------------------------------- /static/images/big-images-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/big-images-2.jpg -------------------------------------------------------------------------------- /static/images/big-images-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/big-images-3.jpg -------------------------------------------------------------------------------- /static/images/big-images.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/big-images.jpg -------------------------------------------------------------------------------- /static/images/burger1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/burger1.jpg -------------------------------------------------------------------------------- /static/images/burger2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/burger2.jpg -------------------------------------------------------------------------------- /static/images/burger3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/burger3.jpg -------------------------------------------------------------------------------- /static/images/burger4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/burger4.jpg -------------------------------------------------------------------------------- /static/images/section-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/autsakorn/nextjs-antd-custom/9ca51c5b29d67804df4f558058f5243d1c2bfe52/static/images/section-1.png -------------------------------------------------------------------------------- /style.less: -------------------------------------------------------------------------------- 1 | .ant-carousel .slick-slide { 2 | text-align: center; 3 | height: 460px; 4 | line-height: 160px; 5 | background: #f8f8f8; 6 | overflow: hidden; 7 | } 8 | .ant-carousel { 9 | padding-bottom: 16px; 10 | } 11 | .ant-carousel .slick-slide h3 { 12 | color: #fff; 13 | } 14 | 15 | a:visited, a:hover, a:active, a:focus { 16 | text-decoration: none; 17 | } 18 | a { 19 | color: #000; 20 | padding: 5px 10px; 21 | } 22 | 23 | .ml-30 { 24 | margin-left: 30px; 25 | } 26 | .float-right { 27 | float: right; 28 | } --------------------------------------------------------------------------------