项目参考 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. python爬虫环境1

    转载 https://cuiqingcai.com/5052.html 1.1 python3安装  配置环境变量:随后点击“新建”,新建一个条目,将刚才复制的C:\Python36复制进去.这里需要 ...

  2. 封装加减乘除函数 解决JS 浮点数计算 Bug

    计算机内部的信息都是由二进制方式表示的,即0和1组成的各种编码,但由于某些浮点数没办法用二进制准确的表示出来,也就带来了一系列精度问题.当然这也不是JS独有的问题. 例如, 我们在用JS做浮点运算会遇 ...

  3. Python新建文件夹

    import os os.mkdir('OS-Demo-2') os.makedirs('OS-Demo-3/sub-Dir-1') os.mkdir()和os.makedirs()都可以新建文件夹, ...

  4. 转载 如何理解API，API 是如何工作的

    本文转载于https://blog.csdn.net/cumtdeyurenjie/article/details/80211896 感谢作者 仁杰兄 大家可能最近经常听到 API 这个概念,那什么是 ...

  5. CodeFirst命令

    CodeFirst get-help entityFramework          NuGet命令 Add-Migration                     Adds a new mig ...

  6. springboot集成使用rabbitmq笔记(1.rabbitmq安装)

    使用rabbitmq笔记一 使用rabbitmq笔记二 使用rabbitmq笔记三 1.选择适配的版本,参考---https://www.rabbitmq.com/which-erlang.html ...

  7. leetcode-168周赛-1298-你能从盒子中获得的最大糖果数

    题目描述: 方法一:bfs class Solution: def maxCandies(self, status: List[int], candies: List[int], keys: List ...

  8. C之输入输出函数(2) -- gets()

    https://www.ibm.com/support/knowledgecenter/en/ssw_ibm_i_71/rtref/gets.htm#gets #include <stdio.h ...

  9. （一）CGI （通用网关接口） 简介

    CGI (通用网关接口)公共网关接口(Common Gateway Interface,CGI)是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能.CGI 应用程序能与浏览器 ...

  10. 基础(二)：Linux系统/etc/init.d目录和/etc/rc.local脚本

    原文来自http://www.ghacks.net/2009/04/04/get-to-know-linux-the-etcinitd-directory/ 译文来自http://blog.csdn. ...