Next.js 常见问题及优解方案-FunTeaLearn Online Web Tutorials

前言

Next.js 是 React 应用程序的服务器渲染框架，它为您处理了服务器渲染和动态路由等常见任务，同时提供了其他高级特性，例如自动代码分割和预获取等。然而，使用 Next.js 时还有一些常见问题需要解决。本文将从以下四个方面介绍 Next.js 的常见问题及其优解方案：

如何处理数据获取和预取问题
如何处理 SEO
如何处理布局组件的共享
如何将 Next.js 集成到现有项目中

1. 如何处理数据获取和预取问题

问题描述

在使用 Next.js 开发应用程序时，我们通常需要从 API 或其他数据源获取数据。而在服务器渲染框架中，将数据获取逻辑整合到组件中通常不是一个好的实践。

问题在于，与客户端渲染不同，你不能等到 JavaScript 加载和执行完毕再获取数据，因为此时服务器已经开始构建应用程序，并将无法等待服务器获取数据，再返回数据到客户端进行渲染。

此外，Next.js 的自动代码拆分功能可能会导致某些数据获取函数在特定页面或组件中完全未加载，从而导致客户端错误或卡顿。

解决方案

Next.js 提供了两种方式处理数据获取和预取问题：

在 getStaticProps 和 getServerSideProps 中预取数据
在 useEffect 中进行数据获取

下面分别介绍一下这两种方式。

在 `getStaticProps` 和 `getServerSideProps` 中预取数据

getStaticProps 和 getServerSideProps 是 Next.js 提供的两个服务器渲染函数。它们允许你在服务器端获取数据，并将其作为属性传递给组件。

这两个函数都是一个异步函数，它们允许你根据路由参数和其他上下文信息获取数据，从而为静态优化和服务器端渲染提供数据。这两个函数都可以在页面和组件中使用。

`getStaticProps`

在使用 getStaticProps 时，Next.js 会在构建时自动调用该函数，并将该函数返回的数据转换为静态 HTML。

在构建时调用 getStaticProps 的好处在于，你可以在构建时获取数据并将其缓存以提高性能。缺点在于，该函数只允许获取静态数据，并且缓存在构建时就已经准备好了。如果你的应用程序需要渲染时获取数据，则该方法不适合你。

`getServerSideProps`

在使用 getServerSideProps 时，Next.js 会在每个请求时调用该函数，并将其返回的数据用于服务器端渲染。

在每个请求中调用 getServerSideProps 的好处在于，你可以在请求时获取数据并将其传递给客户端。这是一个适用于某些应用程序和场景的强大方法。

在 `useEffect` 中进行数据获取

如果你需要在组件加载时或在客户端渲染时获取数据并将其传递给组件，则可以使用 useEffect 钩子。

这是一个普遍的做法，被称为“客户端获取”。它允许你在组件挂载后发送请求，并将其返回数据存储在组件的状态中。但是，这种方法存在一些缺点。首先，你的应用程序的第一次访问将需要渲染时获取数据，这可能会导致呈现延迟。其次，你需要考虑缓存和同步状态问题。

下面是一个使用 useEffect 的例子：

// www.javascriptcn.com code example
import { useState, useEffect } from 'react';

function MyComponent(){
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData(){
      const res = await fetch('/api/data');
      const data = await res.json();
      setData(data);
    }
    fetchData();
  }, []);

  if(!data) return <div>Loading...</div>;

  return <div>{data.message}</div>;
}

2. 如何处理 SEO

问题描述

SEO（搜索引擎优化）对于任何网站都至关重要，而对于一个基于页面的应用程序来说，它更是重要。

Next.js 已经处理了大部分 SEO 问题，但仍有一些需要关注的部分，例如网站地图、页面元信息、关键词等等。

解决方案

下面介绍一些处理 Next.js SEO 问题的方法。

添加网站地图

你可以在 Next.js 中使用 next-sitemap 库来生成网站地图。

首先，安装 next-sitemap：

npm install next-sitemap

然后在 next.config.js 中添加以下内容：

const withSitemap = require('next-sitemap');

module.exports = withSitemap({
  /* config options */
});

最后，在项目根目录下创建 sitemap.xml 文件和 robots.txt 文件。然后，通过在 next.config.js 中配置添加以下选项来更新项目目录：

// www.javascriptcn.com code example
module.exports = {
  /* config options */
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/contact': { page: '/contact' },
      '/post/hello-world': { page: '/post/hello-world' },
    };
  },
};

设置页面元信息

Next.js 提供了一个名为 Head 的组件来设置页面元信息，例如标题、关键字、描述等。

// www.javascriptcn.com code example
import Head from 'next/head';

function MyComponent() {
  return (
    <>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="My page description" />
        <meta name="keywords" content="my,keywords" />
      </Head>
      <div>My Component</div>
    </>
  );
}

生成 Open Graph 和 Twitter 数据

Open Graph 和 Twitter 卡片是社交媒体平台上的一种元素，可以让你的网站在社交媒体平台上更加优雅地展示。

// www.javascriptcn.com code example
import Head from 'next/head';

function MyComponent() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Title" key="title" />
        <meta
          property="og:description"
          content="My Description"
          key="description"
        />
        <meta
          property="og:image"
          content="https://example.com/image.png"
          key="image"
        />
        <meta
          name="twitter:card"
          content="summary_large_image"
          key="summary"
        />
      </Head>
      <div>My Component</div>
    </>
  );
}

3. 如何处理布局组件的共享

问题描述

Next.js 有一种布局组件的概念，在应用程序中用作所有页面之间共享的组件。如何正确的处理布局组件是一个常见、重要的问题。

解决方案

下面是一些处理 Next.js 布局组件的方法：

1. 创建全局布局组件

你可以创建一个名为 _app.js 的文件，在 Next.js 应用程序中使用该文件作为根组件。这个文件可以用于应用程序全局的一些设置，例如添加顶部导航栏、底部页脚等。该组件在整个页面之间共享。

2. 在 `_app.js` 中添加元数据

你还可以将元数据添加到 _app.js 中，例如 CSS 样式、状态提供程序等。

// www.javascriptcn.com code example
import '../styles/globals.css';
import { useState } from 'react';
import { AppContextProvider } from '../contexts/app.context';

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState('light');
  return (
    <AppContextProvider value={{ theme, setTheme }}>
      <Component {...pageProps} />
    </AppContextProvider>
  );
}

export default MyApp;

3. 在页面级别重写布局组件

你可以在页面级别针对具体页面重写布局组件。

// www.javascriptcn.com code example
import Layout from '../components/Layout';

function AboutPage() {
  return (
    <Layout>
      <div>About Page</div>
    </Layout>
  );
}

export default AboutPage;

4. 如何将 Next.js 集成到现有项目中

问题描述

如果你已经有一个现有的 React 项目，想将其集成到 Next.js 中，那么该如何处理？

解决方案

下面是一些处理 Next.js 集成问题的方法：

导航配置

如果你想要保留你的现有导航，你可以在 Next.js 应用程序中自定义导航。

// www.javascriptcn.com code example
import Link from 'next/link';

function NavLink({ href, children }) {
  return (
    <Link href={href}>
      <a>{children}</a>
    </Link>
  );
}

export default function Navbar() {
  return (
    <div className="navbar">
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
      <NavLink href="/contact">Contact</NavLink>
    </div>
  );
}

模块和组件

你可以将现有的 React 模块和组件复制到 Next.js 应用程序，然后通过导入它们使用。

// www.javascriptcn.com code example
import { MyComponent } from '../my-existing-react-component';

export default function About() {
  return (
    <div>
      <h1>About</h1>
      <MyComponent />
    </div>
  );
}

样式和静态文件

通过使用 next.config.js 文件中的 publicRuntimeConfig 配置项，可以从 Next.js 服务器中暴露到客户端的公共变量。

// next.config.js
module.exports = {
  publicRuntimeConfig: {
    MY_VAR: process.env.MY_VAR, // 从主机环境中加载环境变量
  },
};

接下来，你可以在 Next.js 传递给你的 Header 组件中设置这些变量。

// www.javascriptcn.com code example
import Head from 'next/head';
import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();

export default function MyComponent() {
  return (
    <Head>
      <title>{publicRuntimeConfig.MY_VAR}</title>
    </Head>
  );
}

这里的 publicRuntimeConfig 变量可以用于任何因为在 Next.js 中需要使用过程中使用的常量或变量，例如您的应用程序链接地址。

至此，我们介绍了 Next.js 的一些常见问题及其优解方案。希望本文对你有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67822c58935627c900fb01db

Next.js 常见问题及优解方案

前言

1. 如何处理数据获取和预取问题

问题描述

解决方案

在 `getStaticProps` 和 `getServerSideProps` 中预取数据

`getStaticProps`

`getServerSideProps`

在 `useEffect` 中进行数据获取

2. 如何处理 SEO

问题描述

解决方案

添加网站地图

设置页面元信息

生成 Open Graph 和 Twitter 数据

3. 如何处理布局组件的共享

问题描述

解决方案

1. 创建全局布局组件

2. 在 `_app.js` 中添加元数据

3. 在页面级别重写布局组件

4. 如何将 Next.js 集成到现有项目中

问题描述

解决方案

导航配置

模块和组件

样式和静态文件

程序员教程

程序员面试题库

Next.js 常见问题及优解方案

前言

1. 如何处理数据获取和预取问题

问题描述

解决方案

在 getStaticProps 和 getServerSideProps 中预取数据

getStaticProps

getServerSideProps

在 useEffect 中进行数据获取

2. 如何处理 SEO

问题描述

解决方案

添加网站地图

设置页面元信息

生成 Open Graph 和 Twitter 数据

3. 如何处理布局组件的共享

问题描述

解决方案

1. 创建全局布局组件

2. 在 _app.js 中添加元数据

3. 在页面级别重写布局组件

4. 如何将 Next.js 集成到现有项目中

问题描述

解决方案

导航配置

模块和组件

样式和静态文件

程序员教程

程序员面试题库

在 `getStaticProps` 和 `getServerSideProps` 中预取数据

`getStaticProps`

`getServerSideProps`

在 `useEffect` 中进行数据获取

2. 在 `_app.js` 中添加元数据