项目参考 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. 让APK只包含指定的ABI（转）

    转自:http://blog.csdn.net/justfwd/article/details/49308199 现在很多android第三方 sdk是以aar形式提供的,甚至是远程aar,如果这个s ...

  2. 71 Serializable（序列化和反序列化）

    对象的输出流:ObjectOutputStream  把对象输出到文件存储起来,我们称作为序列化对象的输入流:ObjectInputStream   把对象从文件中读取出来,我们称作为反序列化 Obj ...

  3. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  4. SSM框架整合依赖

    <dependencies> <!--mybatis核心jar包--> <dependency> <groupId>org.mybatis</gr ...

  5. PHP FILTER_SANITIZE_URL 过滤器

    定义和用法 FILTER_SANITIZE_URL 过滤器删除字符串中所有非法的 URL 字符. 该过滤器允许所有的字母.数字以及 $-_.+!*'(),{}|\^~[]`">< ...

  6. Confluence 6 站点备份和恢复

    Atlassian 推荐针对生产环境中安装使用的 Confluence 使用原始数据库工具备份策略. 在默认的情况下,Confluence 每天都会备份所有数据和附件到 XML 文件备份中.这些文件被 ...

  7. Windows系统文件夹共享与隐藏共享

    Windows用户之间建立共享文件夹提供共享服务 建立共享文件夹 Window共享:本地网络-->属性-->共享-->高级共享   设置共享名-->另一台主机输入共享主机的IP ...

  8. （转）OpenFire源码学习之十四：插件管理

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43418433 Plugin管理 Openfire把插件模块加入到容器分为以下步骤: l  ...

  9. thinkphp5.0多条件模糊查询以及多条件查询带分页如何保留参数

    1,多条件模糊查询 等于:map[‘id′]=array(‘eq′,100);不等于:map[‘id′]=array(‘eq′,100);不等于:map[‘id’] = array(‘neq’,100 ...

  10. HTML-参考手册: HTTP 方法：GET 对比 POST

    ylbtech-HTML-参考手册: HTTP 方法:GET 对比 POST 1.返回顶部 1. HTTP 方法:GET 对比 POST 两种最常用的 HTTP 方法是:GET 和 POST. 什么是 ...