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

nextJS使用注意事项的更多相关文章

  1. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  2. Windows Server 2012 NIC Teaming介绍及注意事项

    Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...

  3. TODO：Golang指针使用注意事项

    TODO:Golang指针使用注意事项 先来看简单的例子1: 输出: 1 1 例子2: 输出: 1 3 例子1是使用值传递,Add方法不会做任何改变:例子2是使用指针传递,会改变地址,从而改变地址. ...

  4. app开发外包注意事项，2017最新资讯

    我们见过很多创业者,栽在这app外包上.很多创业者对于app外包这件事情不是特别重视,以为将事情交给app外包公司就完事了,实际上不是的.无论是从选择app外包公司还是签订合同.售后维护等各方面都有许 ...

  5. favicon.ioc使用以及注意事项

    1.效果 2.使用引入方法 2.1 注意事项:(把图标命名为favicon.ico,并且放在根目录下,同时使用Link标签,多重保险) 浏览器默认使用根目录下的favicon.ico 图标(如果你并没 ...

  6. ORACLE分区表梳理系列（二）- 分区表日常维护及注意事项（红字需要留意）

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  7. 【原】Masonry+UIScrollView的使用注意事项

    [原]Masonry+UIScrollView的使用注意事项 本文转载请注明出处 —— polobymulberry-博客园 1.问题描述 我想实现的使用在一个UIScrollView依次添加三个UI ...

  8. 《连载 | 物联网框架ServerSuperIO教程》- 5.轮询通讯模式开发及注意事项。附：网友制作的类库说明（CHM）

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  9. 《连载 | 物联网框架ServerSuperIO教程》- 6.并发通讯模式开发及注意事项

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

随机推荐

  1. nodejs模块——fs模块 读取文件

    readFile读取文件 fs.readFile(filename,[option],callback) 方法读取文件. 参数说明: filename String 文件名 option Object ...

  2. Centos 更改语言设置为中文

    说明 自己装系统时一般都可以自定义选择系统语言.可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇.这里简单说一下centos7怎么修改系统语言为中文. 修 ...

  3. Oracle - 单表查询相关

    -- 单表查询 -- 查询表的所有数据, *代表所有 -- select * from [表名]; -- 查询表中指定字段的值 -- select [字段1], [字段2] ... from [表名] ...

  4. phpstorm使用说明

    1.phpstorm软件可以直接断点调试php代码.具体配置方法参考 http://blog.csdn.net/qq4551091/article/details/55258664 就可以了,不过只要 ...

  5. JXOI2017 加法

    题目描述: 可怜有一个长度为 \(n\) 的正整数序列 \(A\),但是她觉得 \(A\) 中的数字太小了,这让她很不开心. 于是她选择了 \(m\) 个区间 \([l_i, r_i]\) 和两个正整 ...

  6. go语言将函数作为参数传递

    Go语言函数作为参数传递,目前给我的感觉几乎和C/C++一致.非常的灵活. import "fmt" import "time" func goFunc1(f  ...

  7. libvert开启TCP监听

    1.设置libvirtd 编辑/etc/libvirt/libvirtd.conf listen_tls = 0 listen_tcp = 1 auth_tcp="none" tc ...

  8. jmeter 创建接口测试案例

    1 怎么做接口测试? 一般情况下,由于我们项目前后调用主要是基于http协议的接口,所以测试接口时主要是通过工具或代码模拟http请求的发送和接收.所以我们下面整理了一下使用Jmeter工具进行htt ...

  9. 【一】Jmeter接口自动化测试系列之参数化方法

    Jmeter作为虽然作为一款和LoadRunner相媲美的性能测试工具,但参数化功能实在不咋地,这里我大概总结了一下Jmeter的参数化方法! 至于参数化的用途,我这里就不多说了,做测试的都明白吧!本 ...

  10. NIO 源码分析(02-2) BIO 源码分析 Socket

    目录 一.BIO 最简使用姿势 二.connect 方法 2.1 Socket.connect 方法 2.2 AbstractPlainSocketImpl.connect 方法 2.3 DualSt ...