Next.js 教程

Next.js 是一个流行的 React 框架，用于构建服务器端渲染（SSR）和静态站点生成（SSG）应用程序。本教程将带你入门，了解如何使用 Next.js 创建一个简单的应用程序。

快速开始

首先，你需要安装 Node.js 和 npm。然后，你可以使用以下命令创建一个新的 Next.js 项目：

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

这将创建一个名为 my-next-app 的新目录，其中包含一个基本的 Next.js 应用程序。

目录结构

Next.js 应用程序的目录结构通常如下所示：

my-next-app/
├── pages/
│   ├── _app.js
│   ├── _document.js
│   └── index.js
├── components/
│   └── ...
├── public/
│   └── ...
├── styles/
│   └── ...
└── ...

• pages/：包含所有页面的文件。
• components/：包含可重用的组件。
• public/：包含静态文件，如图标和图片。
• styles/：包含全局样式文件。

创建页面

要创建一个新页面，你只需在 pages/ 目录中添加一个新文件。例如，创建一个名为 about.js 的新文件，它将生成一个关于页面的链接。

// pages/about.js

export default function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
}

现在，你可以通过访问 /about 来查看这个页面。

图片插入

Next.js 允许你在页面中插入图片。以下是如何在 AboutPage 中插入一张图片的示例：

// pages/about.js

export default function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
      <center><img src="https://cloud-image.ullrai.com/q/Golden_Retriever/" alt="Golden Retriever"/></center>
    </div>
  );
}

链接到其他页面

你可以在页面中添加链接，以便用户可以导航到其他页面。以下是如何在 AboutPage 中添加一个链接到主页的示例：

// pages/about.js

export default function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
      <center><img src="https://cloud-image.ullrai.com/q/Golden_Retriever/" alt="Golden Retriever"/></center>
      <p>Back to <a href="/">Home</a></p>
    </div>
  );
}

总结

这就是 Next.js 的基本教程。希望这个教程能帮助你入门 Next.js 并开始构建你的第一个应用程序。如果你想要了解更多关于 Next.js 的信息，请访问我们的Next.js 官方文档。

希望这个教程对你有所帮助！🚀