Next.js Demo 演示

Next.js 是一个流行的 React 框架，用于构建高性能的 Web 应用。以下是一个简单的 Next.js Demo，展示其基本用法和功能。

安装 Next.js

首先，您需要在您的项目中安装 Next.js。可以通过以下命令完成安装：

npm install next

或者

yarn add next

创建 Next.js 应用

创建一个新的 Next.js 应用，可以使用以下命令：

npx create-next-app my-next-app

这将创建一个新的 Next.js 应用，名为 my-next-app。

文件结构

Next.js 应用的基本文件结构如下：

my-next-app/
├── pages/
│   ├── _app.js
│   ├── _document.js
│   └── index.js
├── components/
│   └── Navbar.js
├── public/
│   ├── index.html
│   └── logo.png
├── styles/
│   └── globals.css
└── package.json

创建页面

在 pages 文件夹中，您可以创建新的页面。例如，创建一个名为 about.js 的页面：

// pages/about.js

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

链接页面

您可以通过在页面中使用 <Link> 组件来链接到其他页面。例如，在 index.js 中添加以下代码：

// pages/index.js

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>
        Welcome to the Home page! <Link href="/about">Go to About page</Link>
      </p>
    </div>
  );
}

使用图片

Next.js 支持使用本地或远程图片。例如，在 index.js 中添加以下代码：

// pages/index.js

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>
        Welcome to the Home page! <Image src="/logo.png" alt="Logo" />
      </p>
    </div>
  );
}

部署

要部署您的 Next.js 应用，可以使用以下命令：

npm run build

然后，您可以将构建的文件上传到您的服务器或云存储服务。

Next.js 官方文档 提供了更多关于 Next.js 的详细信息。