内容简介：Next.js是提供基于React的SSR框架。解决SPA的一些缺点。下文会对SPA应用进行一些简单的介绍，并且会通过拆分本Demo的实现，让大家学会如何从零搭建Next框架。现今前端开发技术，spa（single page application）单页应用的普及度越来越高，react以及vue这类的前端UI框架为spa提供的很好的实现。单页应用的本质其实就是浏览器首先加载必须的HTML、CSS和Javascript，所有的操作都在这张页面上完成，都由JavaScript来控制。优点：
写在前面
Next.js是提供基于React的SSR框架。解决SPA的一些缺点。下文会对SPA应用进行一些简单的介绍，并且会通过拆分本Demo的实现，让大家学会如何从零搭建Next框架。
SPA的本质以及优缺点
现今前端开发技术，spa（single page application）单页应用的普及度越来越高，react以及vue这类的前端UI框架为spa提供的很好的实现。单页应用的本质其实就是浏览器首先加载必须的HTML、CSS和Javascript，所有的操作都在这张页面上完成，都由JavaScript来控制。
优点：
- 分离前后端关注点，前端负责view，后端负责model，各司其职；
- 服务器只接口提供数据，不用展示逻辑和页面合成，提高性能；
- 同一套后端程序代码，不用修改兼容Web界面、手机；
- 用户体验好、快，内容的改变不需要重新加载整个页面；
- 可以缓存较多数据，减少服务器压力；
缺点：
- SEO问题没有html抓不到什么；
- 刚开始的时候加载可能慢很多；
- 用户操作需要写逻辑，前进、后退等；
- 页面复杂度提高很多，复杂逻辑难度成倍；
因此，当我们既要使用SPA的开发模式，又要去兼容此模式缺点的时候，Next就是一个优秀的方案。
从零快速搭建Next框架教程
技术栈为当前最新
- next 6.1.1
- react 16.4.2
- react-dom 16.4.2
目录结构
- react-next-fast/ # 项目名称
- components/ # 组件目录
Hello.js
Layout.js
- pages/ # 本地静态页面入口
- about/ # 模块子目录，路由会相应匹配
index.js # /about
contact.js # /about/contact
index.js # 首页
test.js # /test
- static/ # 静态资源存放目录
- css/ # 样式表目录
index.less
+ img/ # 图片目录
next.config.js # next配置文件
package.json # 项目配置
README.md # 项目说明
init项目
Install Next以及React相关
npm install --save next react react-dom
并且在package.json添加script如下：
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
创建pages目录和index.js文件 根据Next的规范约定，所有的页面都需要放在pages文件夹，因此我们首先先创建一个pages文件夹并在该文件夹下创建第一个页面index。
mkdir pages cd pages touch index.js
编写/pages/index.js
export default () => (
<div className="example">
<h1>Hello Next.js</h1>
</div>
)
运行npm run dev，在浏览器中打开 localhost:3000，就可以看到 Hello Next.js
Next自带路由的使用
在pages文件夹内再创建一个test.js文件并进行编写
export default () => (
<h1>this is test page</h1>
)
在浏览器中打开 localhost:3000/test，就可以看到 this is test page
再次打开index.js并且修改为如下内容：
import Link from 'next/link'
export default () => (
<div className="example">
<h1>Hello Next.js</h1>
<p>Menu</p>
<ul className="menu">
<li><Link href="/test"><a>Test</a></Link></li>
</ul>
</div>
)
打开 localhost:3000，就可以看到页面中多了一个Test的a链接，点击页面就会跳转到 localhost:3000/test
接着我们在pages/下建立about文件夹，并且创建index.js和contact.js两个文件
index.js
export default () => (
<div>
<h1>This is the about page</h1>
</div>
)
contact.js
export default () => (
<div>
<h1>This is the contact page</h1>
</div>
)
分别打开 localhost:3000/about 和 localhost:3000/about/contact 我们会相应的看到两个页面，因此我们会发现，pages文件的目录结构即是页面url的路径，pages本身就是根目录。
Next如何添加样式
首先可以在每一个模块中添加样式：
<style jsx>{`
.red {color:#f00;}
`}</style>
其次，如果要想使用'.css','.less','.sass'或者'.styl'文件，Next官网也同样给到了相应的方案：
本Demo使用的是less的方案，其他方案雷同。
在pages中添加_document.js文件并编辑：
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no minimal-ui" />
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
同时创建static目录，并且添加index.less文件进行编辑，最后在pages/index.js中引用
import Link from 'next/link'
import '../static/index.less'
export default () => (
<div className="example">
<h1>Hello Next.js</h1>
<p>Menu</p>
<ul className="menu">
<li><Link href="/about"><a>About</a></Link></li>
<li><Link href="/about/contact"><a>Contact</a></Link></li>
<li><Link href="/test"><a>Test</a></Link></li>
</ul>
</div>
)
就可以看到，页面的样式会根据index.less的修改进行改变，这样我们就可以去使用less了。
使用React组件
我们将pages/index.js改造成react组件，index这个页面就有了react的生命周期。
import React, { Component } from 'react'
import Link from 'next/link'
import '../static/index.less'
export default class Index extends Component {
constructor(){
super();
console.log('---------constructor--------');
}
componentWillMount(){
console.log('---------componentWillMount--------')
}
componentDidMount(){
console.log('---------componentDidMount--------')
}
componentWillUpdate(){
console.log('---------componentWillUpdate--------')
}
componentDidUpdate(){
console.log('---------componentDidUpdate--------')
}
render (){
return (
<div className="example">
<h1>Hello Next.js</h1>
<p>Menu</p>
<ul className="menu">
<li><Link href="/about"><a>About</a></Link></li>
<li><Link href="/about/contact"><a>Contact</a></Link></li>
<li><Link href="/test"><a>Test</a></Link></li>
</ul>
</div>
)
}
}
打开 localhost:3000 的控制台可以看到在Next框架下pages/index.js文件已经变成了react的组件了。
在使用react的时候，我们会将页面模块化进而拆分成最小单元的component，接下去我们会在根目录创建一个和pages并行的文件夹components来放置一些组件。
mkdir components cd components touch Hello.js
编辑Hello.js的内容
import React, { Component } from 'react'
export default class Hello extends Component {
render (){
return (
<div>
Nice to meet you!
</div>
)
}
}
然后我们随便找一个页面进行引用
pages/about/contact.js
import Head from 'next/head'
import Hello from '../../components/Hello'
export default () => (
<div>
<h1>This is the contact page</h1>
<Hello />
</div>
)
我们打开 localhost:3000/about/contact 可以看到页面用已经引用了 Hello 组件，并显示'Nice to meet you!'
Layout模版设置
在常规的业务常见中，我们经常会碰到同一个结构在多个页面被使用，因此在Next中我们可以设计一个Layout模版进行统一的调用。
cd components touch Layout.js
编辑Layout.js
import Link from 'next/link'
import Head from 'next/head'
export default ({ children, title = 'This is the default title' }) => (
<div>
<Head>
<title>{ title }</title>
<meta charSet='utf-8' />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<header>
<nav>
<Link href='/'><a>Home</a></Link>
<Link href='/about'><a>About</a></Link>
<Link href='/about/contact'><a>Contact</a></Link>
<Link href='/test'><a>Test</a></Link>
</nav>
</header>
{ children }
<footer>
{'I`m footer'}
</footer>
<style jsx>{`
nav {
width:100%;
border-bottom:1px solid #ccc;
line-height:40px;
}
nav a {
margin:0 10px;
color:#999;
}
nav a:hover {
color:#000;
}
footer {
position:fixed;
bottom:0;
width:100%;
border-top:1px solid #ccc;
line-height:40px;
}
`}</style>
</div>
)
在test.js,about/index.js,about/contact.js中进行调用
import React, { Component } from 'react'
import Layout from './../components/Layout'
export default class Test extends Component {
render (){
return (
<Layout title="test page">
<h1>this is test page</h1>
</Layout>
)
}
}
可以看到，localhost:3000/test，localhost:3000/about，localhost:3000/about/contact这个页面都使用了Layout的模版。
Next编辑Head相关设置
Next可以设置每一个页面独有的Head设置，只需要在相应的页面中单独配置。
pages/index.js
import React, { Component } from 'react'
import Link from 'next/link'
import Head from 'next/head' //引入头部配置
import '../static/index.less'
export default class Index extends Component {
constructor(){
super();
console.log('---------constructor--------');
}
componentWillMount(){
console.log('---------componentWillMount--------')
}
componentDidMount(){
console.log('---------componentDidMount--------')
}
componentWillUpdate(){
console.log('---------componentWillUpdate--------')
}
componentDidUpdate(){
console.log('---------componentDidUpdate--------')
}
render (){
return (
<div className="example">
<Head>
<title>首页</title> //设置首页title
</Head>
<h1>Hello Next.js</h1>
<p>Menu</p>
<ul className="menu">
<li><Link href="/about"><a>About</a></Link></li>
<li><Link href="/about/contact"><a>Contact</a></Link></li>
<li><Link href="/test"><a>Test</a></Link></li>
</ul>
</div>
)
}
}
打开首页，可以看到title已变为刚设置的'首页'。
写在结尾
至此，教程已经完结，通过该教程，可以帮助大家更加快速的上手Next.js，查看具体代码，可以将Demo clone到本地，安装并运行。
git clone git@github.com:xiqe/react-next-fast.git npm install npm run dev #访问本地localhost:3000 npm run build #创建静态页面
0
推荐阅读
以上所述就是小编给大家介绍的《从零快速搭建Next框架案例分享》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Effective Java 中文版
（美）Joshua Bloch / 潘爱民 / 机械工业出版社 / 2003-1 / 39.00元
本书介绍了在Java编程中57条极具实用价值的经验规则，这些经验规则涵盖了大多数开发人员每天所面临的问题的解决方案。通过对Java平台设计专家所使用的技术的全面描述，揭示了应该做什么，不应该做什么才能产生清晰、健壮的高效的代码。 本书中的每条规则都以简短、独立的小文章形式出现，这些小文章包含了详细而精确的建议，以及对语言中许多细微之处的深入分析，并通过例子代码加以进一步说明。贯穿全书的是通用......一起来看看 《Effective Java 中文版》 这本书的介绍吧!
随机密码生成器
多种字符组合密码
HEX CMYK 转换工具
HEX CMYK 互转工具