项目参考 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. 最大流EK和Dinic算法

    最大流EK和Dinic算法 EK算法 最朴素的求最大流的算法. 做法:不停的寻找增广路,直到找不到为止 代码如下: @Frosero #include <cstdio> #include ...

  2. CF 600E. Lomsat gelral(dsu on tree)

    解题思路 \(dsu\) \(on\) \(tree\)的模板题.暴力而优雅的算法,轻儿子的信息暴力清空,重儿子的信息保留,时间复杂度\(O(nlogn)\) 代码 #include<iostr ...

  3. php开发面试题---2、php常用面试题二（表单提交方式中的get和post有什么区别）

    php开发面试题---2.php常用面试题二(表单提交方式中的get和post有什么区别) 一.总结 一句话总结: 数据位置:get参数在url里面,post在主体里面 数据大小:get几kb,pos ...

  4. Display与 Visibility的区别

    隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...

  5. centOs7 java启动jar 并部署到nginx

    简单启动命令 启动命令: nohup java –jar 项目名 & 注意1.加&表示一直后台运行,不加表示临时运行,关闭窗口项目即停止运行2.nohup:即项目在运行前新建一个noh ...

  6. script标签的defer、async属性

    之前一直对script标签的defer.async属性一知半解,直到看到了论坛上某大神发的图片,茅塞顿开!!!!!

  7. 集合 HashMap 的原理，与 Hashtable、ConcurrentHashMap 的区别

    一.HashMap 的原理 1.HashMap简介 简单来讲,HashMap底层是由数组+链表的形式实现,数组是HashMap的主体,链表则是主要为了解决哈希冲突而存在的,如果定位到的数组位置不含链表 ...

  8. python+tushare获取股票每日停复牌信息

    接口:suspend 更新时间:不定期 描述:获取股票每日停复牌信息 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称      |      类型      |      必 ...

  9. Python 内置函数&filter()&map()&reduce()&sorted()

    常用内置函数 Python 2.x 返回列表,Python 3.x 返回迭代器 在进行筛选或映射时,输出的结果是一个数组,需要list帮助. 如:print(list(map(lambda x:x+1 ...

  10. mybatis的实际应用

    简单基本的增删改查语句就不说了,直接从一对一,一对多的关系开始: association联合:联合元素用来处理“一对一”的关系; collection聚集:聚集元素用来处理“一对多”的关系; MyBa ...