資訊專欄INFORMATION COLUMN
摘要：樣式在中寫樣式，一般可以歸為類，一類是基于文件的傳統(tǒng)方式包括，等，另一類則是。我們回到我們的代碼中，更改，代碼如下在標(biāo)簽中，我們寫我們的，必須包含在中，否則會(huì)報(bào)錯(cuò)。至此，的基礎(chǔ)概念已經(jīng)介紹完了，更高級(jí)的用法，可以參考官方的例子。
本篇教程基于上一篇的基礎(chǔ)，主要講解服務(wù)端渲染，樣式以及部署相關(guān)的一些知識(shí)，若你沒有看過(guò)上一篇的內(nèi)容，或者你看過(guò)又忘了，建議重新去看一遍。
順便說(shuō)一句，Next.js 3.0的版本在前幾天已經(jīng)正式對(duì)外發(fā)布，本篇教程仍然基于2.x的版本，若你使用3.0的版本，代碼上可能有不一致的地方，需要你留意一下。
為了快速開始，咱們直接使用官方的例子進(jìn)行講解，先把代碼拷貝下來(lái)：
git clone https://github.com/arunoda/learnnextjs-demo.git cd learnnextjs-demo git checkout clean-urls-ssr
項(xiàng)目拷貝下來(lái)后我們進(jìn)入目錄，安裝一下依賴并啟動(dòng)：
cd learnnextjs-demo npm install npm run dev
打開頁(yè)面，即可看到如下效果：
服務(wù)端渲染官方的例子是根據(jù)TVMaze提供的api來(lái)展示電視節(jié)目，因此我們需要安裝isomorphic-unfetch用于獲取遠(yuǎn)程數(shù)據(jù)：
npm install isomorphic-unfetch -S
然后將以下代碼替換到pages/index.js中：
import Layout from "../components/MyLayout.js" import Link from "next/link" import fetch from "isomorphic-unfetch" const Index = (props) => () Index.getInitialProps = async function() { const res = await fetch("https://api.tvmaze.com/search/shows?q=batman") const data = await res.json() console.log(`Show data fetched. Count: ${data.length}`) return { shows: data } } export default Index Batman TV Shows
{props.shows.map(({show}) => (
- {show.name}
))}
上面的代碼中，寫在Index.getInitialProps中的內(nèi)容，既可以跑在server端，也可以跑在瀏覽器端，當(dāng)我們刷新頁(yè)面時(shí)，可以看到server段的控制臺(tái)輸出了：
Show data fetched. Count: 10
但在瀏覽器控制臺(tái)中卻沒有看到輸出，那什么時(shí)候這段代碼會(huì)跑在瀏覽器端呢？那就是當(dāng)你通過(guò)客戶端路由進(jìn)來(lái)的時(shí)候，這段代碼才會(huì)執(zhí)行，我們來(lái)更改一下代碼，
server.js中，找到包含/p/:id的地方，并替換如下：
server.get("/p/:id", (req, res) => {
const actualPage = "/post"
const queryParams = { id: req.params.id }
app.render(req, res, actualPage, queryParams)
})
同時(shí)，更改pages/post.js:
import Layout from "../components/MyLayout.js"
import fetch from "isomorphic-unfetch"
const Post = (props) => (
{props.show.name}
{props.show.summary.replace(/<[/]?p>/g, "")}
)
Post.getInitialProps = async function (context) {
const { id } = context.query
const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
const show = await res.json()
console.log(`Fetched show: ${show.name}`)
return { show }
}
export default Post
這時(shí)候當(dāng)我們是從首頁(yè)的鏈接點(diǎn)進(jìn)去post頁(yè)面時(shí)，會(huì)由post頁(yè)面從瀏覽器端發(fā)出請(qǐng)求獲取數(shù)據(jù)，要是在這個(gè)頁(yè)面直接刷新頁(yè)面，則會(huì)由服務(wù)端獲取數(shù)據(jù)，這就是Next.js實(shí)現(xiàn)的ssr，是不是感覺很簡(jiǎn)單。
另外，如果有些代碼只希望在服務(wù)端執(zhí)行，而不希望瀏覽器端執(zhí)行，在可以根據(jù)context里面有沒有包含req這個(gè)字段來(lái)判斷，代碼如下：
Post.getInitialProps = async function (context) {
if(context.req) {
// 只會(huì)在服務(wù)端執(zhí)行
}
return { show }
}
上面的代碼其實(shí)是有問(wèn)題的，想想看，我希望在服務(wù)端執(zhí)行的代碼，自然不希望webpack把它打包到客戶端，否則會(huì)增大打包后的腳本，用戶體驗(yàn)也不好，解決方案可以參考這里，這里就不展開了。
樣式在react中寫樣式，一般可以歸為2類，一類是基于css文件的傳統(tǒng)方式（包括sass，postcss等），另一類則是css in js。
基于傳統(tǒng)的方式寫css，在Next.js中會(huì)有些問(wèn)題，特別是ssr的時(shí)候，因此，官網(wǎng)給出的解決方案是使用css in js，在Next.js中，已經(jīng)預(yù)裝了一個(gè)css in js的框架叫styled-jsx。
我們回到我們的代碼中，更改pages/index.js，代碼如下：
import Layout from "../components/MyLayout.js"
import Link from "next/link"
function getPosts () {
return [
{ id: "hello-nextjs", title: "Hello Next.js"},
{ id: "learn-nextjs", title: "Learn Next.js is awesome"},
{ id: "deploy-nextjs", title: "Deploy apps with ZEIT"},
]
}
export default () => (
My Blog
{getPosts().map((post) => (
-
{post.title}
))}
)
在標(biāo)簽 )
所以，你需要把樣式寫在子組件中：
const PostLink = ({ post }) => (
或者，使用全局選擇器(global selectors)，只需在style標(biāo)簽中加一個(gè)global關(guān)鍵字，如下：
部署Next.js應(yīng)用部署Next.js也是一件非常簡(jiǎn)單的事情，我們更改一下我們的package.json文件，在scripts字段中添加build和start：
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
}
然后執(zhí)行：
npm run build npm run start
npm run build命令會(huì)打包適用于生產(chǎn)環(huán)境的代碼，npm run start則會(huì)啟動(dòng)我們的應(yīng)用，默認(rèn)端口為3000。
若想啟動(dòng)兩個(gè)應(yīng)用實(shí)例，只需要自定義端口即可，代碼如下：
"scripts": {
"start": "next start -p $PORT"
}
npm run build PORT=8000 npm start PORT=9000 npm start
如上，會(huì)在8000及9000端口各自啟動(dòng)一個(gè)實(shí)例。
至此，Next.js的基礎(chǔ)概念已經(jīng)介紹完了，更高級(jí)的用法，可以參考官方的例子：Next.js。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87368.html
摘要：是一個(gè)基于實(shí)現(xiàn)的服務(wù)端渲染框架，地址為。本文先從簡(jiǎn)單地基礎(chǔ)概念開始，一步一步帶大家認(rèn)識(shí)。本篇教程到此結(jié)束，后面會(huì)跟大家介紹的服務(wù)端渲染及以及部署相關(guān)的一下概念及示例代碼。 Next.js是一個(gè)基于React實(shí)現(xiàn)的服務(wù)端渲染框架，github地址為next.js。 使用Next.js實(shí)現(xiàn)服務(wù)端渲染是一件非常簡(jiǎn)單的事，在這里，你完全可以不用自己去寫webpack等配置，Next.js全都幫...
摘要：從概念來(lái)說(shuō)，就是設(shè)備的物理像素與設(shè)備獨(dú)立像素也就是邏輯像素，以下就稱為邏輯像素的比率。通過(guò)這個(gè)標(biāo)簽，我們可以實(shí)現(xiàn)初始縮放，就可以達(dá)到的邏輯像素眼睛在設(shè)備上看起來(lái)的，換句話說(shuō)可以在上充滿豎屏的整個(gè)寬度。 前言：18年12月24日項(xiàng)目成功上線了，在經(jīng)歷了兩周的線上bug、UI以及代碼優(yōu)化后，解決了不少問(wèn)題，于是再完善與優(yōu)化一下這個(gè)項(xiàng)目。 布局優(yōu)化 高清配置 antd-mobile 自定義...
摘要：前端每周清單第期微服務(wù)實(shí)踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 26 期：Node.js 微服務(wù)實(shí)踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防 作者：王下邀月熊 編輯：徐川...
摘要：前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為...
閱讀 1585·2021-11-25 09:43
閱讀 2488·2019-08-30 15:54
閱讀 2952·2019-08-30 15:53
閱讀 1102·2019-08-30 15:53
閱讀 757·2019-08-30 15:52
閱讀 2551·2019-08-26 13:36
閱讀 822·2019-08-26 12:16
閱讀 1221·2019-08-26 12:13
