項目參考 nextJs-yicha
1. 采用方案
create-next-app、antd
(1)安裝
npx create-next-app --example with-ant-design myApp
2. 樣式加載方案
less + cssModule
3. 同時使用css和sass
// next.config.js
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
module.exports = {
webpack(config, ...args) {
config = withCSS().webpack(config, ...args);
config = withSass().webpack(config, ...args);
}
}
4. 公共頭部方案
1. 設置一個公共組件 Layout
import Head from 'next/head';
export default ({children}) => (
<div>
<Head>
<title>公共頭部</title>
</Head>
{children}
<footer></footer>
</div>
)
2. 使用方法
import Layout from '....';
export default () => (
<Layout>
// content
</Layout>
)
5. 設置icon，正在head自定義組件中添加favicon.ico
<link rel="icon" href="/static/favicon.ico"/>
6. 圖片懶加載(lazysizes)
在layout里面進行引用
import 'lazysizes';
7. 請求跨域解決方案
用node重新起一個服務器作為中間層，通過node進行請求，得到數據后再把數據返回給客戶端，參照server.js