nextJS使用注意事项

最新推荐文章于 2024-05-08 10:07:24 发布

weixin_30312563

最新推荐文章于 2024-05-08 10:07:24 发布

阅读量304

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/usebtf/p/11224546.html

版权

项目参考 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

转载于:https://www.cnblogs.com/usebtf/p/11224546.html

weixin_30312563

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nextJS使用注意事项

项目参考 nextJs-yicha1. 采用方案create-next-app、antd(1)安装npx create-next-app --example with-ant-design myApp2. 样式加载方案less + cssModule3. 同时使用css和sass// next.config.jsconst withCSS = require('@zei...
复制链接

扫一扫