前言：
next.js服務(wù)端渲染講真棱烂，坑是真不少。
我們這里結(jié)合antd構(gòu)建簡(jiǎn)單服務(wù)端運(yùn)用喇伯。咱們這里只講最簡(jiǎn)單的構(gòu)建步驟喊儡，復(fù)雜場(chǎng)景請(qǐng)看官網(wǎng)。咱們要是就是快稻据。
next官網(wǎng)文檔：http://nextjs.frontendx.cn/
1. 安裝腳手架
create-next-app 是next的腳手架會(huì)為你搭建好最基本的next框架艾猜。
構(gòu)建步驟
yarn global add create-next-app
create-next-app my-project
cd my-project
yarn dev
經(jīng)過(guò)上述步驟就可以訪問(wèn)我們的頁(yè)面。默認(rèn)端口是3000捻悯，但是經(jīng)常被占用匆赃，所以
我們更改 package.json：
"scripts": {
- "dev": "next",
+ "dev": "next -p 3006",
"build": "next build",
"start": "next start"
},
頁(yè)面展示：
2. 加入antd
安裝antd和按需加載的babel-plugin-import。
yarn add antd babel-plugin-import
目前時(shí)間2019年5月今缚，此時(shí)的next@8.1.0十分不穩(wěn)定算柳，和antd結(jié)合出現(xiàn)了太多的問(wèn)題，耽誤了我非常多的時(shí)間姓言。有位開(kāi)發(fā)提供了一個(gè)穩(wěn)定版本瞬项。next@7.0.2，推薦大家都修改下事期，避免打包和導(dǎo)出靜態(tài)資源出現(xiàn)各種問(wèn)題滥壕。
安裝next@7.0.2
yarn remove next
yarn add next@7.0.2
跟目錄下建立.babelrc
{
"presets": ["next/babel"],
"plugins": [
// 可以使用裝飾器decorator
["@babel/plugin-proposal-decorators", { "legacy": true }],
// 讓我們可以使用根路徑，避免相對(duì)路徑的混亂兽泣，如import Head from '@/components/Head'
[
"module-resolver",
{
"alias": {
"@": "./"
}
}
],
// 按需加載并且可以使用less的配置
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
對(duì)于.babelrc的功能绎橘，我們需要安裝以下包：
yarn add @zeit/next-css @zeit/next-less less
yarn add babel-plugin-import
yarn add @babel/plugin-proposal-decorators
yarn add babel-plugin-module-resolver
根目錄有個(gè)next.config.js，專門(mén)用來(lái)修改next以及webpack的配置唠倦。更改如下：
const withLess = require('@zeit/next-less');
const WithCss = require('@zeit/next-css');
// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
require.extensions['.less'] = file => {};
}
module.exports = withLess(
WithCss({
lessLoaderOptions: {
modifyVars: {
'primary-color': '#1DA57A'
},
javascriptEnabled: true
}
})
);
其中modifyVars是修改antd的皮膚称鳞。
3. 編寫(xiě)demo
根目錄pages下本身是有index.js，我們建兩個(gè)文件夾index.less和user.js稠鼻，Link就可以直接路由跳轉(zhuǎn)冈止，不需要配置畜疾，還有Router鹃彻，詳情看官網(wǎng)。
index.js代碼更換
import React, { Fragment } from 'react';
import Link from 'next/link';
import Head from '@/components/Head';
import './index.less';
import { Button} from 'antd';
const Home = () => (
<Fragment>
<Head title={'next-ssr'} />
<h1>歡迎來(lái)到next</h1>
{/* Link內(nèi)需要a標(biāo)簽稚瘾，不然爬蟲(chóng)識(shí)別不了慌盯，不用a可以加passHref周霉，提高爬蟲(chóng)識(shí)別率 */}
<Link href="/userList" passHref>
<Button type="primary">用戶列表頁(yè)</Button>
</Link>
</Fragment>
);
export default Home;
新建的index.less
h1 {
color: green;
}
新建的user.js
const User = () => <h2>我是用戶列表頁(yè)</h2>;
export default User;
此時(shí)yarn dev，可以看到生效了亚皂。
4. 部署
package.json 代碼更改如下：
"scripts": {
"dev": "next -p 3006",
"start": "next start -p 3006",
"build": "next build",
"export": "next build && next export && serve out"
},
yarn build 就可以打包我們的項(xiàng)目俱箱，然后yarn start 就可以訪問(wèn)。
yarn build
yarn start
next 提供輸出靜態(tài)頁(yè)面：next export灭必。
serve 是很好用的本地服務(wù)器狞谱，我想大家都遇到打包后的html乃摹，路徑不能直接訪問(wèn)把，就是因?yàn)槟J(rèn)是需要啟動(dòng)服務(wù)才能訪問(wèn)的跟衅，serve完美解決了我們的問(wèn)題孵睬。
yarn global add serve
yarn export
發(fā)布到自己服務(wù)器上：
github提供了一個(gè)免費(fèi)的服務(wù)器GitHub Pages，這里可以展示自己的靜態(tài)頁(yè)面与斤，如寫(xiě)個(gè)博客肪康。
1. 怎么建github項(xiàng)目和關(guān)聯(lián)遠(yuǎn)程，我這里就不說(shuō)了撩穿，大家百度一下磷支。
2. 更改 package.json，增加了github這個(gè)命令食寡，大家可拆分看一下雾狈。
"scripts": {
"dev": "next -p 3006",
"start": "next start -p 3006",
"build": "next build",
"export": "next build && next export && serve out",
"github": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
}
3. 在next.config.js增加配置：assetPrefix和publicRuntimeConfig
const withLess = require('@zeit/next-less');
const WithCss = require('@zeit/next-css');
// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
require.extensions['.less'] = file => {};
}
const prod = process.env.NODE_ENV === 'production';
module.exports = withLess(
WithCss({
lessLoaderOptions: {
modifyVars: {
'primary-color': '#1DA57A'
},
javascriptEnabled: true
},
// next-antd-ssr這個(gè)名字是你github項(xiàng)目名稱
assetPrefix: prod ? '/next-antd-ssr' : '',
publicRuntimeConfig: {
linkPrefix: prod ? '/next-antd-ssr' : ''
}
})
);
4. 將pages下的index.js更改：增加了linkPrefix和link中的as
import React, { Fragment } from 'react';
import Link from 'next/link';
import Head from '@/components/Head';
import './index.less';
import { Button} from 'antd';
import getConfig from 'next-server/config';
const { linkPrefix } = getConfig().publicRuntimeConfig;
const Home = () => (
<Fragment>
<Head title={'next-ssr'} />
<h1>歡迎來(lái)到next</h1>
{/* Link內(nèi)需要a標(biāo)簽，不然爬蟲(chóng)識(shí)別不了抵皱，不用a可以加passHref善榛，提高爬蟲(chóng)識(shí)別率 */}
<Link href="/userList" passHref as={`${linkPrefix}/userList`}>
<Button type="primary">用戶列表頁(yè)</Button>
</Link>
</Fragment>
);
export default Home;
5. 執(zhí)行代碼：
yarn github
6. 訪問(wèn)頁(yè)面：大家在github的項(xiàng)目找到setting，往下翻到GitHub Pages呻畸，點(diǎn)擊鏈接就可以看到自己寫(xiě)的靜態(tài)頁(yè)面了移盆。
作者的demo
github項(xiàng)目：https://github.com/muyu-zhilu/next-antd-ssr
發(fā)布的靜態(tài)demo：https://muyu-zhilu.github.io/next-antd-ssr/
其他
為什么沒(méi)用服務(wù)端server.js ？
next.js是默認(rèn)服務(wù)端渲染伤为，例如我們使用koa咒循，是可以自由控制自己的路由，而且還可以寫(xiě)接口绞愚，做全棧開(kāi)發(fā)叙甸。這里貼上我寫(xiě)的代碼，供大家參考：
- 在根目錄下建立
server.js
const Koa = require('koa');
const next = require('next');
const Router = require('koa-router');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = new Koa();
const router = new Router();
router.get('*', async ctx => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
});
server.use(async (ctx, next) => {
ctx.res.statusCode = 200;
await next();
});
server.use(router.routes());
// 防止出現(xiàn)控制臺(tái)報(bào)404錯(cuò)誤
server.use(async (ctx, next) => {
ctx.res.statusCode = 200;
await next();
});
server.listen(3001, () => {
console.log('server is running at http://localhost:3001');
});
});
- 更改
package.json
nodemon可以自動(dòng)重啟服務(wù)位衩，-i ./pages是不需要重啟的路徑裆蒸。
"scripts": {
"dev": "node ./server.js",
"build": "next build",
"start": "nodemon ./server.js -i ./pages ./components ./utils"
},
結(jié)束了，如果喜歡的話糖驴，點(diǎn)個(gè)?僚祷，謝謝。有什么疑問(wèn)贮缕，可以隨時(shí)聯(lián)系我久妆。
如果大家不想用next寫(xiě)服務(wù)端，其實(shí)是有koa2+react也可以搭建跷睦，還有egg.js可以寫(xiě)企業(yè)級(jí)應(yīng)用。
有個(gè)名詞叫同構(gòu)應(yīng)用肋演，就是需要seo就用服務(wù)端渲染抑诸，不需要就用spa客戶端渲染烂琴，不得不說(shuō)路由跳轉(zhuǎn)速度，spa單頁(yè)特別快蜕乡。所以之后的前端奸绷，不僅僅是頁(yè)面搭建，而是創(chuàng)造更好體驗(yàn)的全棧工程師层玲，一起加油吧号醉！
