Next.js 的 App.js 和 Document.js 简介-JavaScript中文网-JavaScript教程资源分享门户

前言

Next.js 是一个 React 框架，它独特的服务端渲染和静态导出功能使得开发者可以快速构建出高性能、高可靠性的网站或者 web 应用程序。在 Next.js 中，有两个重要的文件分别是 App.js 和 Document.js，它们分别负责控制整个应用程序的布局和渲染。在本篇文章中，我们将详细介绍 App.js 和 Document.js 的功能和使用方法，并为读者提供实际的代码示例。

App.js

App.js 是 Next.js 中的一个重要组件，它是所有页面组件的外层容器，并且提供了一些默认的全局样式和生命周期方法。我们可以使用自定义的 App 组件来全局性的配置 Next.js 的渲染行为和生命周期方法。例如，我们可以使用自定义的 App 组件来添加全局性的 css 组件库，自定义样式等。

以下是一个简单的 App.js 组件示例：

import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

这个示例中，我们使用了 Next.js 的内置 App 组件，这个组件提供了一些默认的行为，例如自动注入 Next.js 的全局样式。除此之外，我们可以把 App 组件作为一个父组件来包裹其他需要渲染的组件。像上面的示例一样，我们可以将<Component {...pageProps} />添加到返回值中，来渲染页面组件。

如果我们需要覆盖 Next.js 应用程序的默认行为，我们可以通过创建自定义的 App 组件来实现。在自定义的 App 组件中，我们可以使用 getInitialProps 方法来获取全局数据。

以下是一个使用 getInitialProps 方法的自定义 App.js 组件的示例代码：

// javascriptcn.com 代码示例
import App from 'next/app'
import axios from 'axios'

function MyApp({ Component, pageProps, globalData }) {
  return <Component {...pageProps} globalData={globalData} />
}

MyApp.getInitialProps = async (appContext) => {
  const { data } = await axios.get('/api/global-data')
  const appProps = await App.getInitialProps(appContext)

  return { ...appProps, globalData: data }
}

export default MyApp

这个示例中，我们在 MyApp 组件中添加了一个 globalData 属性，然后通过 getInitialProps 方法来获取全局的数据。在 MyApp 的返回函数中，我们将这个数据添加到了<Component {...pageProps} globalData={globalData} />中，以便于页面组件使用。在这个示例中，我们使用了 axios 这个第三方库来获取数据。

Document.js

Document.js 是 Next.js 中的另外一个重要文件，它是用于扩展 HTML 的 React 组件。它通常用于操控应用程序的文档头部(meta、title等元素)和 body 部分。我们可以编写自定义的 Document 组件来修改默认的 Next.js HTML 文档结构，添加 favicon、meta 信息和样式表等。

以下是一个简单的 Document.js 的示例代码：

// javascriptcn.com 代码示例
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

这个示例中，我们通过继承自 Document 组件，并覆写 render 方法来自定义 HTML 文档结构。在自定义的 Document 组件中，我们添加了一个 meta 标签到 Head 区域。在 body 区域中，我们使用了 Main 和 NextScript 组件来渲染页面的主要内容和 scripts。

总结

在本篇文章中，我们详细介绍了 Next.js 中的 App.js 和 Document.js 组件的功能和使用方法。我们了解到，使用自定义的 App 组件和 Document 组件，我们可以灵活的扩展和定制化我们的 Next.js 应用程序。希望读者能够通过本篇文章的学习，更好的理解和掌握 Next.js 的开发技术，更好的应用到实际开发中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654cb7cd7d4982a6eb61de77