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

  1. const withCSS = require('@zeit/next-css');
  2. const withSass = require('@zeit/next-sass');
  4. module.exports = {
  5.   webpack(config, ...args) {
  6.     config = withCSS().webpack(config, ...args);
  7.     config = withSass().webpack(config, ...args);
  8.   }
  9. }

4. 公共头部方案

1. 设置一个公共组件 Layout

  1. import Head from 'next/head';
  2. export default ({children}) => (
  3.   <div>
  4.     <Head>
  5.       <title>公共头部</title>
  6.     </Head>
  7.     {children}
  8.     <footer></footer>
  9.   </div>
  10. )

2. 使用方法

  1. import Layout from '....';
  3. export default () => (
  4.   <Layout>
  5.     // content
  6.   </Layout>
  7. )

5. 设置icon，正在head自定义组件中添加favicon.ico

  1. <link rel="icon" href="/static/favicon.ico"/>

6. 图片懒加载(lazysizes)

在layout里面进行引用

  1. 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. 1、Spring MVC的web.xml配置详解（转）

    版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/u010796790 1.spring 框架解决字符串编码问题:过滤器 CharacterEncodingFilt ...

  2. 服务注册与发现---spring cloud

    Eureka基本架构 Register Service :服务注册中心,它是一个 Eureka Server ,提供服务注册和发现的功能. Provider Service :服务提供者,它是 Eur ...

  3. pygame游戏框架

    #_author:来童星#date:2019/12/22 import pygame import sys pygame.init() size=width,height=640,480 screen ...

  4. go函数声明

    go函数声明 这是一个很好的机会去介绍函数支持多值返回.查看下面3个函数:一个没有返回值,一个返回一个值,一个返回2个值. func log(message string) { } func add( ...

  5. centos修改、保存文件的详细步骤

    [一]修改文件 如果是使用普通用户登录的,需要先切换到管理员用户,打开终端,输入:su,接着按提示输入密码即可:然后使用命令进入需要修改文件的所在目录,常用的几个命令如下: ① cd + 目录名 ② ...

  6. Python实现中英文翻译方法总结

    #Author:Chenglong Qian #Copyright :Chenglong Qian import json import requests import re import os im ...

  7. appium 定位弹出框时报错

    今天在做APP自动化时,发现定位弹出框无法定位,无奈,百度去找．发现了一篇不错的博客,故转载过来,供大家参考．后续会验证这个方法的可行性． 本博客转自:http://blog.csdn.net/qq7 ...

  8. django 重写用户模型 AbstractBaseUser

    https://blog.csdn.net/weixin_40744265/article/details/80745652

  9. jQuery片段 - 表单action的更改和提交

    //点击表单“提交”按钮 $("#submitBut").bind("click", function() { var url = "..." ...

  10. Java 并发之原子性与可见性

    原子性 原子是世界上的最小单位,具有不可分割性.比如 a=0:(a非long和double类型) 这个操作是不可分割的,那么我们说这个操作时原子操作.再比如:a++: 这个操作实际是a = a + 1 ...