Next.js 使用指南3－高级配置

最新推荐文章于 2024-08-07 17:25:33 发布

Jartto

最新推荐文章于 2024-08-07 17:25:33 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/Jartto/article/details/106681020

版权

本文是Next.js使用指南系列的第三篇，主要介绍如何进行高级配置，包括组件覆写、异常处理、自定义配置文件、Webpack和Babel配置，以及静态HTML输出、CDN前缀支持等。通过这些配置，你可以更好地掌控Next.js应用的开发和部署。

摘要由CSDN通过智能技术生成

书接上文 Next.js 使用指南2-路由与加载，到这里，恭喜你已经完成了大部分的学习，基本使用已经足够。何不锦上添花，顺势拿下最难啃的部分呢？

一、关于组件

同 App 组件一样，document 组件也可以被覆写，这时我们需要创建 .pages/_document.js 文件：

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file

// ./pages/_document.js
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 组件。当然，该组件也可以被覆写。例如：

// 创建_error.js 文件：
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>
        {

最低0.47元/天解锁文章

Jartto

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Next.js 使用指南3－高级配置

书接上文 Next.js 使用指南2-路由与加载，到这里，恭喜你已经完成了大部分的学习，基本使用已经足够。何不锦上添花，顺势拿下最难啃的部分呢？一、关于组件同 App 组件一样，document 组件也可以被覆写，这时我们需要创建 .pages/_document.js 文件：1234567891011121314151617181920212223242526// _...
复制链接

扫一扫