Logo

菜单

发布于 2026-01-06 0 阅读
0

Next.js 系列 #1 - 使用 Next.js（React 的服务器端渲染框架）搭建一个简单的博客有多么容易？

Next.js 系列 #1 - 使用 Next.js（React 的服务器端渲染框架）搭建一个简单的博客有多么容易？

如果您不熟悉 Next.js 的背景及其用途，让我简要介绍一下。

我们都知道 React 库（或者你也可以称之为框架）在客户端 Web 开发中非常流行，它能以单页应用程序 (SPA) 的形式为用户提供流畅的网站浏览体验。但是，出于以下原因，你可能希望在服务器端渲染你的 React 应用：

  1. 提高 Web 应用的初始加载速度（尤其是在应用规模增大时）。
  2. 提升搜索引擎优化 (SEO) 排名潜力，避免搜索引擎爬虫只能看到客户端渲染应用程序中的空 div 标签。
  3. 适用于预渲染的静态网站

Next.js 是 React 的服务端渲染框架，可以让你同时拥有两者的优势。2019 年 10 月推出的 create-next-app 工具让这一切变得更加便捷。本文仅用于演示目的，你可以在其官方文档网站 ( https://nextjs.org/learn/basics/create-nextjs-app ) 上了解更多信息。

要在服务器端编写 JavaScript 代码，您需要安装 Node.js（版本 10.13 或更高版本）。
输入以下命令创建一个 Next.js 项目：

npx create-next-app demo-for-next
Enter fullscreen mode Exit fullscreen mode

安装完软件包后，进入你的应用程序目录，然后用代码编辑器打开（本演示将使用 vscode）。

替代文字

这是默认的文件结构。通常我会添加一个名为“components”的文件夹来存放 React 组件的 .jsx 文件，但为了演示方便，我们先使用这个默认的文件结构。

创建了一个名为“pages”的文件夹，并在其中放置了一些文件（index.js、_app.js、api>hello.js）。这里的每个 .js 文件都代表 Web 应用的一个端点（_app.js 除外，它是一个可自定义的应用组件，默认情况下会将页面初始化到各自的端​​点，我们将在后续章节中单独讨论并介绍其用法）。index.js 将自动成为根路由（“/”），您可以通过将 js 文件（“hello.js”）放入名为“api”的文件夹来嵌套路由，此时端点为“/api/hello”。这样设置不同的路由非常方便，只需构建每个页面即可（文件名将是路径名，只是不包含“.js”）。

您可以通过在终端中输入“npm run dev”来启动开发服务器，然后访问 localhost:3000 来查看 Next.js 预构建的页面。您应该会进入根路径，其中显示 index.js 的内容，您可以导航到 /api/hello 路由来查看 hello.js 的内容。
替代文字

替代文字

让我们开始构建一个非常简单的博客示例。打开“pages”文件夹下的“index.js”文件。我们将修改根路径的内容，使其指向我们的示例博客首页。我只是用Next.js的现有样式做了一个简单的示例。

import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>My Little Blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to My Blog
        </h1>
        <div className={styles.grid}>
          <Link href="./blog1">
            <a className={styles.card}>
              <h3>Blog 1</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu.</p>
            </a>
          </Link>

          <Link href="./blog2">
            <a className={styles.card}>
              <h3>Blog 2</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu.</p>
            </a>
          </Link>
        </div>
      </main>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

请注意，我从“next/link”导入了 Link。这是一个非常有用的功能，它允许你为这个服务器端渲染的应用执行客户端路由。这意味着当用户更改 URL 或端点路径时，我们的应用无需每次都向服务器发送请求。只需使用 `<link>` 标签包裹你想要导航到的目标 HTML 元素（在本例中是锚点标签），Next.js 就会为你完成剩下的工作。在本例中，我们希望从首页导航到每篇博客文章页面。

接下来，我们将创建两篇博客文章，仅用于演示目的，并将讨论将来如何使用 Next.js 使我们的应用程序动态化。

替代文字

import styles from '../styles/Home.module.css';
import Link from 'next/link';

export default function Blog1(){
    return (
        <div className={styles.main}>
            <h1 className={styles.title}>HELLO, THIS IS BLOG 1</h1>
            <p className={styles.card} style={{width: "50%"}}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu. Vestibulum quis accumsan enim. Aenean sed justo tortor. Duis tincidunt elit ut vulputate commodo. Maecenas at laoreet felis, quis euismod quam. Nulla at nibh sit amet ipsum tincidunt lacinia ac eu mauris.

                Nam ornare congue egestas. In sed urna convallis, efficitur mauris et, eleifend sem. Vivamus a tempus risus. Donec dignissim nec arcu vel laoreet. Aenean ultrices porta diam. Duis vel eros vehicula, ornare felis eu, eleifend diam. Praesent sit amet erat sed libero feugiat molestie ut nec felis.

                Vivamus laoreet ex sed ligula vestibulum congue. Pellentesque porttitor tellus ut odio pulvinar sagittis. Morbi viverra tristique dignissim. Proin interdum luctus semper. Nulla at pulvinar orci. Curabitur sed dapibus sem. Mauris rhoncus aliquam felis sit amet feugiat. Curabitur tincidunt facilisis semper.

                Etiam sit amet risus et orci tincidunt posuere. Integer fermentum pellentesque velit nec venenatis. Etiam eleifend laoreet rhoncus. Aenean cursus tortor neque, in varius eros hendrerit quis. Maecenas eu porttitor eros. Integer quis fringilla mauris. Morbi pulvinar mattis justo a elementum. Phasellus aliquam auctor orci sit amet hendrerit. In ante nisl, pretium vitae volutpat et, semper nec ex. Phasellus leo arcu, congue eu convallis nec, varius quis sem. Quisque sodales neque blandit massa mollis bibendum. Cras nec molestie velit. Nullam vel consequat libero, non porta ipsum. Sed sit amet libero mi. Etiam iaculis ipsum sed porttitor gravida. Duis nec pretium ante.

                Sed ullamcorper accumsan mi, at dignissim dolor vestibulum in. Quisque diam orci, congue in sagittis a, dapibus et odio. Praesent convallis augue non fringilla maximus. Aliquam varius ipsum ac cursus tempus. Donec lacus purus, tincidunt id ultrices ut, sollicitudin sit amet erat. Curabitur a gravida lorem, id feugiat orci. Curabitur ut pretium nulla, at pulvinar libero. Aliquam blandit neque blandit felis interdum, sed dictum ligula porttitor. Mauris condimentum ut massa in placerat. Suspendisse rhoncus finibus leo ut sagittis. Cras quis odio nec ante gravida viverra ut ac dui. Nunc tristique dictum metus vitae pharetra. Vivamus in leo vel urna sagittis efficitur sit amet a ante. Nulla pellentesque malesuada imperdiet. Phasellus non lacus consectetur, lobortis orci ac, gravida nisl. Vivamus eget lobortis elit.
            </p>
            <Link href="/">
                <a>Back to home</a>
            </Link>
        </div>
        );
}
Enter fullscreen mode Exit fullscreen mode 
import styles from '../styles/Home.module.css';
import Link from "next/link";

export default function Blog2(){
    return (
        <div className={styles.main}>
            <h1 className={styles.title}>HELLO, THIS IS BLOG 2</h1>
            <p className={styles.card} style={{width: "50%"}}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris lectus. Proin pulvinar ipsum id augue efficitur, vel imperdiet magna ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id nisi velit. Donec commodo blandit orci in gravida. Mauris non purus vel erat ornare bibendum porttitor a elit. Nullam maximus neque tortor, non lobortis felis posuere eu. Praesent orci turpis, pulvinar sit amet dolor at, viverra sollicitudin erat.

                Integer aliquam ornare mauris sed sagittis. Aenean interdum lectus consectetur elementum dapibus. Pellentesque non ipsum imperdiet, commodo elit sed, ornare purus. Sed lacus ipsum, tempor at elementum rhoncus, tempor ac nisi. Morbi tellus ex, malesuada aliquet ultrices a, aliquam eu erat. Nulla rhoncus et orci at scelerisque. Donec dignissim ac nibh ac varius.

                Nulla mollis lacinia urna nec feugiat. Mauris libero ipsum, eleifend quis dolor ac, vulputate porta odio. Suspendisse semper felis nec elementum elementum. Maecenas placerat lorem eget odio mattis finibus. Etiam auctor mauris eget massa tristique, non luctus leo suscipit. In egestas mauris in lectus facilisis, porta semper felis lobortis. Suspendisse elit nibh, euismod et velit id, ornare accumsan massa. Donec ut ante in nunc ornare gravida. In dictum urna sed laoreet sollicitudin. Duis vel scelerisque neque, vitae dapibus tellus. Curabitur volutpat libero a interdum porttitor. Praesent purus est, consectetur iaculis convallis ut, congue fringilla est. Maecenas venenatis risus lectus, a pellentesque magna ullamcorper ac. Nulla tempus et metus et dictum. Aenean neque metus, fringilla et condimentum sit amet, aliquam sed ipsum.

                In a ipsum egestas, congue nulla nec, dictum nisi. Ut libero urna, posuere eget ipsum sed, tempus commodo metus. Ut cursus enim id ex cursus, eget laoreet mi sodales. Proin nulla turpis, consequat vitae ultrices eget, suscipit non libero. Aliquam porttitor varius sem in pellentesque. Vivamus volutpat neque erat, a ullamcorper tortor ullamcorper eu. Duis a magna pulvinar, imperdiet ligula sit amet, pharetra urna. Nam lobortis lectus at velit ultricies, sit amet pellentesque sapien cursus. Donec posuere ex tellus, at auctor enim aliquam eget. Duis iaculis lorem vitae efficitur pretium. In sit amet quam egestas, dapibus quam vel, placerat lacus. Integer ut commodo felis. Aliquam tristique ex eu quam tincidunt suscipit. Fusce porta blandit urna. Vestibulum quis porta nibh, at dictum odio. Sed ut pulvinar quam.

                Vivamus ultrices, sem ut lacinia pellentesque, nibh sem posuere orci, in aliquam nisi enim id tellus. Quisque elementum laoreet lectus in gravida. Morbi vitae egestas libero. Cras erat dolor, faucibus sed leo eget, lobortis pharetra leo. Aenean nec sapien lorem. Ut facilisis mauris quam, at commodo diam ultricies ut. Nam eget lectus vitae nulla sagittis porttitor non at ligula. Aenean porta est vitae mi pulvinar scelerisque. Ut vel orci tellus. Aenean tincidunt quis elit ut porttitor. Suspendisse nisi nisi, sodales at ante at, efficitur consequat mi.

                Curabitur tempus cursus nulla quis cursus. Morbi pretium fringilla posuere. Nullam tristique ex at justo ornare elementum. Vestibulum blandit quis urna eget gravida. Sed dapibus hendrerit ante, a dictum diam maximus sed. Vivamus accumsan odio et finibus varius. Pellentesque fringilla erat purus. Sed lacinia purus in consectetur consequat. Donec nec blandit neque. Quisque lobortis rutrum quam ac pulvinar. Nunc semper tempus lectus, consequat eleifend nunc feugiat quis. Sed volutpat erat a mauris auctor vulputate. Vestibulum ipsum ligula, porttitor eu massa convallis, scelerisque consequat massa.

                Cras non condimentum risus, quis sollicitudin neque. Vivamus aliquet hendrerit urna vel tincidunt. Praesent tristique scelerisque tristique. Vivamus risus dui, ornare non lobortis ut, pharetra ullamcorper tellus. Nunc quis urna egestas, accumsan mauris eget, sodales metus. Fusce nec dignissim purus. Suspendisse ultrices pretium tellus, ultrices efficitur lorem semper eu. Quisque laoreet, lorem placerat scelerisque feugiat, ante felis pulvinar libero, id pharetra turpis eros ut nisi. Etiam dictum nulla at lectus rhoncus condimentum. Phasellus a quam augue. Nullam ornare nisi eget elit rhoncus sagittis.
            </p>
            <Link href="/">
                <a>Back to home</a>
            </Link>
        </div>
        );
}
Enter fullscreen mode Exit fullscreen mode

点击链接（返回首页）进行浏览，你会发现刷新按钮不会“闪烁”，这意味着页面不会重新渲染，就像 React 一样。

本次演示到此结束，我们将在以后的文章中更深入地探讨 Next.js 的相关主题，例如动态路由、getInitialProps 等。

请关注我，我会持续发布关于网页设计、编程和自我提升的文章😊

文章来源：https://dev.to/ohdylan/how-easy-it-is-to-start-setting-up-a-simple-blog-with-next-js-server-side-rendering-framework-for-react-1kd7
使用 Gulp 优化您的网站速度并...
送给身边开发者的十大礼物 DEV ...