nextJS使用注意事项
项目参考 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使用注意事项的更多相关文章
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Windows Server 2012 NIC Teaming介绍及注意事项
Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...
- TODO：Golang指针使用注意事项
TODO:Golang指针使用注意事项 先来看简单的例子1: 输出: 1 1 例子2: 输出: 1 3 例子1是使用值传递,Add方法不会做任何改变:例子2是使用指针传递,会改变地址,从而改变地址. ...
- app开发外包注意事项，2017最新资讯
我们见过很多创业者,栽在这app外包上.很多创业者对于app外包这件事情不是特别重视,以为将事情交给app外包公司就完事了,实际上不是的.无论是从选择app外包公司还是签订合同.售后维护等各方面都有许 ...
- favicon.ioc使用以及注意事项
1.效果 2.使用引入方法 2.1 注意事项:(把图标命名为favicon.ico,并且放在根目录下,同时使用Link标签,多重保险) 浏览器默认使用根目录下的favicon.ico 图标(如果你并没 ...
- ORACLE分区表梳理系列（二）- 分区表日常维护及注意事项（红字需要留意）
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...
- 【原】Masonry+UIScrollView的使用注意事项
[原]Masonry+UIScrollView的使用注意事项 本文转载请注明出处 —— polobymulberry-博客园 1.问题描述 我想实现的使用在一个UIScrollView依次添加三个UI ...
- 《连载 | 物联网框架ServerSuperIO教程》- 5.轮询通讯模式开发及注意事项。附：网友制作的类库说明（CHM）
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
- 《连载 | 物联网框架ServerSuperIO教程》- 6.并发通讯模式开发及注意事项
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
随机推荐
- 解决Addin开发不能断点调试的问题
ArcMap或CAD在调试C#二次开发的插件的时候,在一些情况下不能正常进入到断点中,原因是debugger type不对应. eg. 右键单击Solution Explorer,选择Add-> ...
- Zookeeper用作注册中心的原理
RPC框架中有3个重要的角色: 注册中心 :保存所有服务的名字,服务提供者的ip列表,服务消费者的IP列表: 服务提供者: 提供跨进程服务: 服务消费者: 寻找到指定命名的服务并消费. 一:Zooke ...
- Java之JDBC操作数据库
DBC JDBC就是一套接口,真正执行的是jar包里得实现类,通过泛型对象来执行实现类里的方法. 步骤: ###1.导入驱动jar包到工程中 ###2.编写代码注册驱动,我们要让程序知道用的是哪个驱动 ...
- 定时器实现Promise.all()的简单使用
// 异步事件1 function time1() { const promise = new Promise(function (resolve, reject) { setTimeout(func ...
- leetcode-12双周赛-1244-力扣排行榜
题目描述: class Leaderboard: def __init__(self): self.map = collections.Counter() def addScore(self, pla ...
- 高级运维(四)：Nginx常见问题处理、安装部署Tomcat服务器、使用Tomcat部署虚拟主机
一.Nginx常见问题处理 目标: 本案例要求对Nginx服务器进行适当优化,以提升服务器的处理性能: 1> 不显示Nginx软件版本号 2> 如果客户端访问服务器提示“Too many ...
- BZOJ 3430: [Usaco2014 Jan]Ski Course Rating(并查集+贪心)
题面 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 136 Solved: 90 [Submit][Status][Discuss] Descript ...
- 微信支付完成 vue 页面不跳转问题
遇到的问题是 vue 调用微信支付 回调成功以后,页面路由不跳转. 解决的办法是用window.location.href /** * @method 支付费用方法 * @param data:后台返 ...
- php开发面试题---1、php常用面试题一（PHP有哪些特性）
php开发面试题---1.php常用面试题一(PHP有哪些特性) 一.总结 一句话总结: ①.混合语法:php独特混合了C,Java,Prel以及PHP自创的语法. ②.为动态网页而生:可以比CGI或 ...
- JAVA调用R脚本 windwos路径下
RConnection c = new RConnection();// REXP x = c.eval("source('D:\\\\jiaoben\\\\RJava_test.R',en ...