Next.js 使用及实践-JavaScript中文网-JavaScript教程资源分享门户

什么是 Next.js？

Next.js 是一个 React 框架，它可以帮助我们快速搭建 React 应用。与传统的 React 应用不同，Next.js 还提供了服务器端渲染、静态导出、自动代码分割等功能。

为什么要使用 Next.js？

服务器端渲染

传统的 React 应用是将页面渲染在浏览器中，这样会导致两个问题：首屏渲染慢、不利于 SEO。而 Next.js 提供了服务器端渲染的功能，将页面渲染在服务器端，可以加快首屏渲染速度，并且更利于 SEO。

静态导出

有些页面不需要动态数据，仅仅只需要静态生成即可。Next.js 提供了静态导出的功能，可以将页面生成为静态 HTML 文件，这样可以加快页面加载速度，并且可以方便地部署到 CDN 上。

自动代码分割

Next.js 可以自动将代码分割成更小的块，这样可以加快页面加载速度，提高用户体验。

如何使用 Next.js？

安装 Next.js

使用 npm 安装 Next.js：

npm install next react react-dom

创建页面

在 pages 目录下创建一个页面，例如 index.js：

// javascriptcn.com 代码示例
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

export default Home;

运行应用

在 package.json 中添加以下脚本：

{
  "scripts": {
    "dev": "next dev"
  }
}

然后运行：

npm run dev

即可启动应用。

部署应用

Next.js 可以将应用部署到多种平台，例如：

Vercel
Heroku
AWS
Azure
Google Cloud

以 Vercel 为例，只需要将代码上传到 GitHub 或 GitLab，然后在 Vercel 上创建一个项目，即可自动部署。

实践：使用 Next.js 构建博客

创建项目

使用 create-next-app 命令创建一个 Next.js 项目：

npx create-next-app my-blog

创建页面

在 pages 目录下创建一个名为 index.js 的页面，用于显示博客文章列表：

// javascriptcn.com 代码示例
import React from 'react';

function Home() {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
      </ul>
    </div>
  );
}

export default Home;

在 pages 目录下创建一个名为 posts 目录，用于存放博客文章页面。在 posts 目录下创建一个名为 [slug].js 的页面，用于显示博客文章内容：

// javascriptcn.com 代码示例
import React from 'react';
import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>{slug}</h1>
      <p>This is the content of the post.</p>
    </div>
  );
}

export default Post;

创建样式

在 styles 目录下创建一个名为 global.css 的文件，用于设置全局样式：

// javascriptcn.com 代码示例
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

a {
  color: blue;
}

在 pages 目录下的 index.js 和 posts/[slug].js 中引入 global.css：

import '../styles/global.css';

创建数据源

在根目录下创建一个名为 posts.json 的文件，用于存放博客文章列表：

// javascriptcn.com 代码示例
[
  {
    "slug": "article-1",
    "title": "Article 1"
  },
  {
    "slug": "article-2",
    "title": "Article 2"
  },
  {
    "slug": "article-3",
    "title": "Article 3"
  }
]

动态生成页面

在 pages 目录下的 index.js 中使用 getStaticProps 函数获取博客文章列表：

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

export async function getStaticProps() {
  const res = await fetch('http://localhost:3000/posts.json');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

function Home({ posts }) {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

在 pages 目录下的 posts/[slug].js 中使用 getStaticProps 函数获取博客文章内容：

// javascriptcn.com 代码示例
import React from 'react';
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  const res = await fetch('http://localhost:3000/posts.json');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`http://localhost:3000/posts/${params.slug}.md`);
  const content = await res.text();

  return {
    props: {
      content,
    },
  };
}

function Post({ content }) {
  return (
    <div>
      <article dangerouslySetInnerHTML={{ __html: content }}></article>
    </div>
  );
}

export default Post;

部署应用

将代码上传到 GitHub 或 GitLab，然后在 Vercel 上创建一个项目，即可自动部署。

总结

Next.js 是一个非常强大的 React 框架，它提供了服务器端渲染、静态导出、自动代码分割等功能，可以帮助我们快速搭建 React 应用。在实践中，我们使用 Next.js 构建了一个博客，并使用了服务器端渲染、动态生成页面等功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6506f89b95b1f8cacd28e82d