1. 介紹 一個react.js 服務器端渲染開源項目（不只是服務器端渲染，直接也可以生成純靜態(tài)站點） 類似的解決方案有好多，比如react.js 自身的服務器渲染方案（但是使用起來就是比較怪異） gatsbyjs 也是一個不錯的解決方案 2. 初始化項目 // 依賴 npm install --save next react react-dom // package.json 添加啟動腳本{"scripts": {"dev": "next","build": "next build","start": "next start"} } 3. 進行開發(fā) // 創(chuàng)建目錄 mkdir pages // 簡單代碼 touch index.js nano index.js export default () => <div>Welcome to next.js!</div> // 啟動 npm run dev ok 就是這么簡單 4. 效果 5. 生成的頁面
說明： 本身進行了優(yōu)化，而且和以前的react.js 項目是不一樣的，有自己的一套路由，以及錯誤處理，還有就是styled-jxs 還是比較方便的 ， 類似的方式有 styled-components https://www.styled-components.com/ 的react.js 項目是不一樣的，有自己的一套路由，以及錯誤處理，還有就是styled-jxs 還是比較方便的 ， 類似的方式有 styled-components https://www.styled-components.com/ 6. 生成純靜態(tài)站點 touch next.config.jsmodule.exports = {exportPathMap: function() {return {'/': { page: '/' },'/about': { page: '/about' },'/index': { page: '/index' }}} }// 修改 package.json"scripts": {"dev": "next","build": "next build && next export","start": "next start"}// 啟動并生成npm run build // 效果 out 目錄. ├── about │?? └── index.html ├── index │?? └── index.html ├── index.html └── _next├── 0b64b5d8-c35c-4475-81e3-a13779e823be│?? └── page│?? ├── about│?? │?? └── index.js│?? ├── _error│?? │?? └── index.js│?? └── index.js└── fa86b6114a1f9591804ca6129852ceb2└── app.js備注：實際項目需要使用的話，直接放到nginx 后者 varnish traffice server 等類似的靜態(tài)緩存服務器即可類似 now 的發(fā)布模式就

總結(jié)

以上是生活随笔為你收集整理的next.js 简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。