如何通过 Next.js 框架实现服务端渲染，并提升 SEO 优化效果-JavaScript中文网-JavaScript教程资源分享门户

什么是服务端渲染

在普通的单页面应用中，前端通过 JavaScript 动态改变页面内容，而服务端渲染则是在服务器端将页面渲染后再返回给客户端。服务端渲染具有以下优势：

更好的 SEO 效果：搜索引擎更容易读取服务端渲染的页面，从而更好地收录网站。
更快的首次展示时间：服务器端生成数据和 HTML，节省客户端不必要的操作，提高首次加载速度。
更好的用户体验：客户端在加载 JavaScript 和数据时不必等待，用户可以更快地看到页面。

Next.js 简介

Next.js 是一个 React 应用程序的服务端渲染框架，其特点包括：

支持服务端渲染和静态导出。
自带路由功能。
支持热模块更新。
支持 TypeScript。

使用 Next.js 实现服务端渲染

安装 Next.js

首先，需要在本地安装 Next.js。

npm install next react react-dom

创建页面

创建一个 pages 文件夹，并在其中创建一个名为 index.js 的文件。在 index.js 文件中，添加以下代码：

// javascriptcn.com 代码示例
const Index = () => {
  return (
    <div>
      <h1>Hello Next.js</h1>
    </div>
  );
};

export default Index;

这将是我们的主页页面。

运行应用程序

使用以下命令来运行 Next.js 应用：

npm run dev

在浏览器中访问 http://localhost:3000，应该能够看见刚才创建的页面。

实现服务端渲染

在 Next.js 中，我们可以通过创建一个 getInitialProps() 函数来实现服务端渲染。

首先，在 index.js 文件中，添加以下代码：

// javascriptcn.com 代码示例
const Index = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
};

Index.getInitialProps = async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(response =>
    response.json()
  );
  return { data };
};

export default Index;

在该代码中，我们向 jsonplaceholder API 发送 HTTP 请求，获取数据。然后，将数据作为 props 传递给组件。

现在，再次访问 http://localhost:3000，应该能够看到网络面板中还有服务器端渲染的请求。

静态生成

让我们尝试将 Next.js 应用程序导出为静态 HTML 文件。首先，在 package.json 文件中，添加以下脚本：

{
  "scripts": {
    "build": "next build",
    "export": "next export"
  }
}

然后，在终端中执行以下命令：

npm run build
npm run export

这将使应用程序生成在 out 目录中。

SEO 优化

在此之前，我们已经通过服务端渲染提高了 SEO 的效果。然而，还有一些更好的 SEO 实践，我们可以称之为 "SEO 优化"。

网站地图 (sitemap) 和 robots.txt 文件

网站地图和 robots.txt 文件是搜索引擎优化中重要的一环。Next.js 简化了这两个文件的创建过程。

// javascriptcn.com 代码示例
const fs = require('fs');

const Sitemap = () => {};

export async function getServerSideProps({ res }) {
  const sitemap = fs.readFileSync('./public/sitemap.xml', {
    encoding: 'utf8',
    flag: 'r',
  });

  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();

  return { props: {} };
}

export default Sitemap;

在该文件中，我们通过 getServerSideProps 函数读取 public 文件夹中的 sitemap.xml 文件，并将其返回给浏览器。

robots.txt 文件

在 public 文件夹中创建 robots.txt 文件，并填入以下内容：

User-agent: *
Disallow:

这一行代码表示允许所有网页抓取。

描述和标题

每个页面应该具有唯一的标题和描述。这通常是在 head 标签中实现的。

在 Next.js 中，我们可以直接在 _document.js 文件中定义文档头。

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta name="description" content="这是网站的描述" />
          <title>这是页面的标题</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Schema.org

Schema.org 是一种语义标记方式，在 HTML 中嵌入结构化数据，以帮助搜索引擎更好地理解网站。在 Next.js 中，我们可以使用 @next/seo 模块轻松添加结构化数据。

首先，安装 @next/seo 模块。

npm install @next/seo

然后，在 _app.js 文件中，添加以下代码：

// javascriptcn.com 代码示例
import { DefaultSeo, ArticleJsonLd } from 'next-seo';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        title="这是标题"
        description="这是描述"
        openGraph={{
          type: 'website',
          url: 'https://www.example.com',
          title: '这是标题',
          description: '这是描述',
          images: [
            {
              url: 'https://www.example.com/og-image.jpg',
              alt: '这是图片',
            },
          ],
        }}
        twitter={{
          cardType: 'summary_large_image',
        }}
      />
      <ArticleJsonLd
        url="https://www.example.com/path/to/article"
        title="Article headline"
        images={[
          'https://www.example.com/photos/1x1/photo.jpg',
          'https://www.example.com/photos/4x3/photo.jpg',
          'https://www.example.com/photos/16x9/photo.jpg',
        ]}
        datePublished="2025-02-05T08:00:00+08:00"
        dateModified="2025-02-05T09:20:00+08:00"
        authorName="Jane Blogs"
        publisherName="Example Bloggers"
        publisherLogo="https://www.example.com/photos/logo.jpg"
        description="This is a mighty good description of this article."
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

链接优化

在 SEO 中，内部链接和外部链接都非常重要。内部链接可以增加页面的 PageRank，而外部链接可以提高页面的权重。同样，优化链接结构也可以为搜索引擎提供更多的上下文信息。

在 Next.js 中，我们可以使用 Link 组件来优化内部链接。

// javascriptcn.com 代码示例
import Link from 'next/link';

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>主页</a>
          </Link>
        </li>
        <li>
          <Link href="/about"><a>关于我们</a></Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;

对于外部链接，我们可以使用 next/head 组件来添加 link 标签。

// javascriptcn.com 代码示例
import Head from 'next/head';

const HomePage = () => {
  return (
    <>
      <Head>
        <link rel="canonical" href="https://www.example.com" />
      </Head>
      <div>Hello Next.js</div>
    </>
  );
};

export default HomePage;

总结

服务端渲染是提高 SEO 效果的一种有效方式，Next.js 是一个优秀的服务端渲染框架，它为我们提供了更多的 SEO 优化实践。我们可以通过添加网站地图、robots.txt 文件、标题和描述、Schema.org 数据以及优化链接来提高网站的搜索引擎排名。

希望这篇文章能帮助您了解如何通过 Next.js 框架实现服务端渲染，并提升 SEO 优化效果。如果您有任何疑问或建议，请随时与我们联系。

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