next.js 简单使用

1. 介绍

一个react.js  服务器端渲染开源项目（不只是服务器端渲染，直接也可以生成纯静态站点）
类似的解决方案有好多，比如react.js 自身的服务器渲染方案（但是使用起来就是比较怪异）
gatsbyjs 也是一个不错的解决方案

2. 初始化项目

// 依赖
npm install --save next react react-dom
// package.json 添加启动脚本{"scripts": {"dev": "next","build": "next build","start": "next start"}
}

3. 进行开发

// 创建目录
mkdir  pages
// 简单代码
touch index.js
nano index.js
export default () => <div>Welcome to next.js!</div>
// 启动
npm run dev
ok  就是这么简单

4. 效果

5. 生成的页面

说明：

本身进行了优化，而且和以前的react.js 项目是不一样的，有自己的一套路由，以及错误处理，还有就是styled-jxs 还是比较方便的 ， 类似的方式有 styled-components https://www.styled-components.com/

的react.js 项目是不一样的，有自己的一套路由，以及错误处理，还有就是styled-jxs 还是比较方便的，类似的方式有 styled-components https://www.styled-components.com/

6. 生成纯静态站点

touch next.config.jsmodule.exports = {exportPathMap: function() {return {'/': { page: '/' },'/about': { page: '/about' },'/index': { page: '/index' }}}
}// 修改 package.json"scripts": {"dev": "next","build": "next build && next export","start": "next start"}// 启动并生成npm run build // 效果  out 目录.
├── about
│   └── index.html
├── index
│   └── index.html
├── index.html
└── _next├── 0b64b5d8-c35c-4475-81e3-a13779e823be│   └── page│       ├── about│       │   └── index.js│       ├── _error│       │   └── index.js│       └── index.js└── fa86b6114a1f9591804ca6129852ceb2└── app.js备注：实际项目需要使用的话，直接放到nginx 后者 varnish traffice server 等类似的静态缓存服务器即可类似 now 的发布模式就

next.js 简单使用相关推荐

EChart.js 简单入门
EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
js简单验证码的生成和验证
如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div><table border="0" cellspacing="5&quo ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
js 简单的滑动教程（四）
作者:Lellansin 转载请标明出处,谢谢在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程前几篇中的代码,还存在着bug, ...
php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下本文实例讲述了JS简单获取并修改in ...
H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...
js简单交互动画，运动吧
今天看了一下慕课网上讲解js简单动画的视频教程,讲解确实挺细致的,大家可以去慕课网搜一下.OK,下面的内容就是我的学习总结,以方便日后的"回访",哈哈!由于是总结,我就不贴完整的源 ...
php 跳转邮箱,JS简单实现点击跳转登陆邮箱功能的方法
本文实例讲述了JS简单实现点击跳转登陆邮箱功能的方法.分享给大家供大家参考,具体如下: 前言注册的过程中往往需要填写邮箱,并登陆邮箱进行验证.利用JS可以实现针对不同的邮箱进行点击登录验证,以下为实 ...
php 跳转邮箱,实例详解JS简单实现点击跳转登陆邮箱功能的方法
本文主要介绍了JS简单实现点击跳转登陆邮箱功能的方法,涉及js针对hash表的遍历与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下,希望能帮助到大家前言注册的过程中往往需要填写邮箱,并登陆 ...
table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...

next.js 简单使用

next.js 简单使用相关推荐

最新文章

热门文章