從零快速搭建Next框架案例分享
寫在前面
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官網也同樣給到了相應的方案：
- ofollow,noindex" target="_blank">@zeit/next-css
- @zeit/next-sass
- @zeit/next-less
- @zeit/next-stylus
本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 [email protected]:xiqe/react-next-fast.git npm install npm run dev#訪問本地localhost:3000 npm run build#建立靜態頁面
0