跳到主要内容

Next.js 第一个应用

介绍​

Next.js 是一个基于 React 的框架，提供了服务器端渲染（SSR）、静态站点生成（SSG）和客户端渲染（CSR）等功能。它简化了 React 应用的开发流程，并提供了许多开箱即用的功能，如路由、API 路由和优化性能的工具。

在本教程中，我们将从头开始创建一个简单的 Next.js 应用，并逐步讲解每一步的操作。

环境准备​

在开始之前，请确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已安装：

bash
node -v
npm -v

如果未安装，请前往 Node.js 官网 下载并安装。

创建 Next.js 应用​

1. 初始化项目​

首先，打开终端并运行以下命令来创建一个新的 Next.js 应用：

bash
npx create-next-app@latest my-first-next-app

这将创建一个名为 my-first-next-app 的目录，并自动安装所有依赖项。

2. 启动开发服务器​

进入项目目录并启动开发服务器：

bash
cd my-first-next-app
npm run dev

打开浏览器并访问 http://localhost:3000，你将看到一个默认的 Next.js 欢迎页面。

项目结构​

让我们快速浏览一下项目结构：

my-first-next-app/
├── node_modules/
├── public/
├── styles/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── .gitignore
├── package.json
├── README.md
  • pages/ 目录是 Next.js 的核心部分，每个文件都会自动映射到一个路由。
  • public/ 目录用于存放静态资源，如图片、字体等。
  • styles/ 目录包含 CSS 文件。

创建你的第一个页面​

1. 修改首页​

打开 pages/index.js 文件，你会看到以下代码：

javascript
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>
    </div>
  )
}

让我们修改一下标题和内容：

javascript
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>我的第一个 Next.js 应用</title>
        <meta name="description" content="这是我的第一个 Next.js 应用" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          欢迎来到我的第一个 Next.js 应用！
        </h1>
      </main>
    </div>
  )
}

保存文件后，浏览器中的页面将自动更新。

2. 添加新页面​

在 pages/ 目录下创建一个新文件 about.js，并添加以下代码：

javascript
export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是一个关于我们的页面。</p>
    </div>
  )
}

保存文件后，访问 http://localhost:3000/about，你将看到新创建的页面。

实际应用场景​

Next.js 非常适合构建需要 SEO 优化的网站、博客、电子商务平台等。例如，你可以使用 Next.js 创建一个博客系统，利用其静态生成功能来预渲染所有文章页面，从而提高加载速度和搜索引擎排名。

总结​

通过本教程，你已经成功创建了你的第一个 Next.js 应用，并了解了如何创建和修改页面。Next.js 提供了强大的功能，帮助你快速构建现代化的 Web 应用。

附加资源​

练习​

  1. 尝试在 pages/ 目录下创建一个新的页面 contact.js，并添加一些联系信息。
  2. 修改 about.js 页面，添加一个返回首页的链接。
提示

如果你在练习中遇到问题，可以参考 Next.js 官方文档或社区论坛寻求帮助。