Next.js是一個新的通用JavaScript框架，它為基于React和服務(wù)器的Web應(yīng)用提供了一個新的可選方案。
Next.js目前已經(jīng)開源，https://zeit.co/blog/next
部署web應(yīng)用程序的最佳方式是作為靜態(tài)HTML應(yīng)用程序，如果可能的話。使用靜態(tài)應(yīng)用程序，您可以使用像NGINX這樣的快速高效的web服務(wù)器，或者像ZEIT now或GitHub頁面這樣具有成本效益的靜態(tài)托管服務(wù)。
但并不是所有的應(yīng)用都可以作為靜態(tài)應(yīng)用來部署，如果你的應(yīng)用需要在運行時生成動態(tài)頁面，你就不能將它作為一個靜態(tài)應(yīng)用來部署。
如果你可以將你的應(yīng)用歸類為靜態(tài)應(yīng)用，您可以使用next.js來構(gòu)建它。
Next.js3.0帶來了新的特性允許你把一個應(yīng)用程序作為靜態(tài)頁面導(dǎo)出。
在這節(jié)課中，我們將探討這個特性。
讓我們開始吧。
在這節(jié)課中，我們需要一個簡單的Next.js應(yīng)用程序。試著下載下面的示例應(yīng)用程序。
(這是我們在之前的課程中創(chuàng)建的博客應(yīng)用。)
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout static-blog-base
你可以執(zhí)行以下命令：
npm install
npm run dev
現(xiàn)在，您可以通過導(dǎo)航到 http://localhost:3000/ 來訪問該應(yīng)用程序。
導(dǎo)出首頁
現(xiàn)在，我們將導(dǎo)出首頁(pages/index.js)作為一個靜態(tài)HTML頁面。
首先，創(chuàng)建一個名為 next.config.js 的文件，在你的應(yīng)用程序的根目錄，并添加以下內(nèi)容:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' }
}
}
}
然后將下面的NPM腳本添加到package.json中。
"scripts": {
"build": "next build",
"export": "next export"
}
然后運行以下命令:
npm run build
npm run export
現(xiàn)在，您可以在項目中看到一個名為“out”的目錄中的導(dǎo)出的HTML內(nèi)容。
這是一個功能齊全的靜態(tài)網(wǎng)頁應(yīng)用，你可以把它部署到任何靜態(tài)主機服務(wù)上，而且效果很好。
但在此之前，我們需要在本地測試它。
為了測試這款應(yīng)用，請在全局安裝 serve NPM模塊:
npm install -g serve
“serve”是一個非常簡單的靜態(tài)web服務(wù)器。您也可以使用其他類似的工具。
但是為了讓事情變得簡單，使用 serve 在這一課中。
在安裝了“serve”之后，可以從應(yīng)用程序根下面運行以下命令:
cd out
serve -p 8080
現(xiàn)在，您可以使用:http://localhost:8080來訪問您的靜態(tài)應(yīng)用程序。
一切都應(yīng)該照常工作。
現(xiàn)在嘗試訪問這個頁面:http://localhost:8080/p/hello-nextjs/
你如何描述輸出?
只有首頁
正如您所經(jīng)歷的那樣，您將得到一個“Not Found”的頁面作為內(nèi)容。當(dāng)你試圖直接訪問頁面時，你會得到它。除了首頁(/)，您還可以看到其他頁面的相同行為。
這就是這里發(fā)生的事情:
您可以通過客戶端訪問所有頁面，因為應(yīng)用程序加載了相關(guān)的JavaScript內(nèi)容。但是當(dāng)您嘗試直接加載它時，它就沒有HTML內(nèi)容可以使用。
那是因為我們只在Next.js導(dǎo)入出首頁 index(/)的原因。
看看我們添加的配置:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' }
}
}
}
導(dǎo)出其它頁面
現(xiàn)在，讓我們試著進出口和所有其他頁面。
為此，向next.config.js文件 添加以下內(nèi)容:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': { page: '/post', query: { title: "Hello Next.js" } },
'/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
'/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } }
}
}
}
正如上面的配置所示，/about 路徑與 / 路徑非常相似。但其他的則有些不同。
這里是這樣的:
為了在我們的應(yīng)用中呈現(xiàn)博客文章，我們有一個單獨的頁面叫做/post。我們通過查詢字符串將不同的內(nèi)容傳遞給該頁面。
因此，在導(dǎo)出應(yīng)用程序時，我們還需要提供這些查詢字符串。
這就是我們用上面的配置來處理所有頁面，從/p/開始。
現(xiàn)在關(guān)閉已經(jīng)運行的應(yīng)用程序，并在你的應(yīng)用程序根中運行以下命令:
npm run build
npm run export
cd out
serve -p 8080
現(xiàn)在，您將能夠訪問以下頁面而沒有任何問題:
http://localhost:8080/p/learn-nextjs/
讓我們做一個簡單的任務(wù)。
在您的配置中添加以下內(nèi)容:
'/p/exporting-pages': { page: '/post', query: { title: "Learn to Export HTML Pages" } }
我們的最終配置將是這樣的:
module.exports = {
exportPathMap: function () {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/p/hello-nextjs': {page: '/post', query: { title: "Hello Next.js" } },
'/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
'/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } },
'/p/exporting-pages': { page: '/post', query: { title: "Learn to Export HTML Pages" } }
}
}
}
然后關(guān)閉當(dāng)前的“serve”實例，并在應(yīng)用程序根中運行以下命令:
npm run export
cd out
serve -p 8080
現(xiàn)在嘗試訪問這個頁面:http://localhost:8080/p/exporting-pages/。
頁面的輸出是什么?
不需要總是構(gòu)建
如您所見，我們可以訪問頁面而不會有任何問題。這個頁面在/頁面中是不可用的，但是我們可以為它生成靜態(tài)HTML。
這是因為導(dǎo)出的HTML完全由我們添加到的配置控制 next.config.js.
為了導(dǎo)出該頁面，這些是我們調(diào)用的命令:
npm run export
cd out
serve -p 8080
正如您所看到的，沒有 npm run build 命令。這是為什么呢?
頁面已經(jīng)在那里了
next.js 在運行下一個導(dǎo)出命令時，js不會構(gòu)建應(yīng)用程序。在這種情況下，在構(gòu)建中已經(jīng)存在/post頁面，并且不需要再次構(gòu)建整個應(yīng)用程序。
但如果我們對這款應(yīng)用做了任何改動，我們就需要再次開發(fā)應(yīng)用來獲得這些變化。
部署應(yīng)用程序
部署應(yīng)用程序非常簡單。只需訪問“out”目錄，并將其部署到您最喜歡的靜態(tài)主機服務(wù)。
如果你現(xiàn)在用的是ZEIT now，這是如何做到的:
cd out
now
就是這樣
這都是關(guān)于next.js的靜態(tài)HTML導(dǎo)出特性。你可以開發(fā)你的應(yīng)用，通常是 next (也就是:npm run dev)，當(dāng)你部署這個應(yīng)用的時候，你可以把它導(dǎo)出為一個靜態(tài)應(yīng)用。
但是，如果您需要在部署應(yīng)用程序后動態(tài)創(chuàng)建頁面，那么這不是解決方案。
為此，您需要構(gòu)建應(yīng)用程序，并在開始時啟動它，或者使用我們的programmatic API。
