书接上文 Next.js 使用指南2-路由与加载,到这里,恭喜你已经完成了大部分的学习,基本使用已经足够。何不锦上添花,顺势拿下最难啃的部分呢?
一、关于组件
同 App
组件一样,document
组件也可以被覆写,这时我们需要创建 .pages/_document.js
文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } }
render() {
return ( <html> <Head> <style>{
`body { margin: 0 } /* custom! */`}</style> </Head> <body className="custom_class"> <Main /> <NextScript /> </body> </html> ) } }
|
Pages in Next.js skip the definition of the surrounding document’s markup. For example, you never include ,
, etc.
二、异常处理
Nextjs
中有默认的 error.js
文件,如果 404
或者 500
都会加载 error
组件。当然,该组件也可以被覆写。例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
import React from 'react'
export default class Error extends React.Component {
static getInitialProps({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : null; return { statusCode } }
render() {
return ( <p> {
|