nextjs 自定義app.js
作用:
固定layout
保持一些公用的狀態
給頁面傳入一些自定義數據
自定義錯誤處理
nextjs 自定義document.js
用途:
只有在服務端渲染的時候才會被調用,用來修改服務器渲染的文檔內容,
一般用來配合第三方css-in-js方案使用
nextjs lazyLoading
A.getInitialProps = async ctx => {
//使用moment 時候才加載一個模塊
const moment = await import('moment')
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve({
name: 'thomas',
time: moment.default(Date.now() - 60 * 1000).fromNow()
})
}, 1000);
})
return await promise
}
nextjs的配置項
const configs = {
// 編譯文件的輸出目錄
distDir: 'dest',
// 是否給每個路由生成Etag
generateEtags: true,
// 頁面內容緩存配置
onDemandEntries: {
// 內容在內存中緩存的時長(ms)
maxInactiveAge: 25 * 1000,
// 同時緩存多少個頁面
pagesBufferLength: 2
},
// 在pages目錄下那種后綴的文件會被認為是頁面
pageExtensions: ['jsx', 'js'],
// 配置buildId
generateBuildId: async () => {
if (process.env.YOUR_BUILD_ID) {
return process.env.YOUR_BUILD_ID
}
// 返回null使用默認的unique id
return null
},
// 手動修改webpack config
webpack(config, options) {
return config
},
// 修改webpackDevMiddleware配置
webpackDevMiddleware: config => {
return config
},
// 可以在頁面上通過 process.env.customKey 獲取value
env: {
customKey: 'value'
},
// 下面倆個要通過 ‘next/config’來讀取
// 只有在服務端渲染時才會獲取的配置
serverRuntimeConfig: {
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET
},
// 在服務端渲染和客戶端渲染都可獲取的配置
publicRuntimeConfig: {
staticFolder: '/static'
}
}
nextjs ssr 流程
瀏覽器發起/page請求 => koa收到請求并且調用nextjs => nextjs開始渲染
=>調用 app的getInitialProps => 調用頁面的getInitialProps=>
渲染出最終html=>返回給瀏覽器=> end</br>
路由跳轉
點擊連接按鈕=>異步加載頁面組件 => 調用頁面的getInitialProps=>
數據返回路由變化=>渲染新的頁面