Next.js 页面-JavaScript中文网-JavaScript教程资源分享门户

在本章节中，我们将深入探讨 Next.js 中页面的基本概念、创建方法以及相关配置。我们将从基础的页面结构开始，逐步深入到动态路由和页面优化等方面。

页面的基本结构

Next.js 的页面由一组文件组成，这些文件存储在项目的 pages 目录下。每个文件对应一个特定的 URL 路径。例如，pages/index.js 文件对应的是网站的根路径（/），而 pages/about.js 文件则对应 /about 路径。

示例：创建一个简单的页面

假设我们要创建一个简单的“关于我们”的页面，步骤如下：

在 pages 目录下创建一个新的文件 about.js。

在该文件中添加以下代码：

// www.javascriptcn.com code example
// pages/about.js
export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是一个示例页面。</p>
    </div>
  );
}

启动开发服务器并访问 http://localhost:3000/about，即可看到我们创建的页面。

动态路由

动态路由允许我们在页面之间传递参数，并根据这些参数显示不同的内容。动态路由通过在文件名中使用方括号来定义，例如 [id].js。

示例：动态路由

假设我们需要创建一个展示用户信息的页面，可以根据用户的 ID 来显示不同的用户详情。步骤如下：

在 pages 目录下创建一个新的文件 users/[id].js。

在该文件中添加以下代码：

// www.javascriptcn.com code example
// pages/users/[id].js
import { useRouter } from 'next/router';

export default function User() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>用户详情</h1>
      <p>用户ID: {id}</p>
    </div>
  );
}

启动开发服务器并访问 http://localhost:3000/users/123，可以看到用户 ID 显示为 123。

静态生成与服务器端渲染

Next.js 支持多种页面渲染模式，包括静态生成（Static Generation）和服务器端渲染（Server-side Rendering）。这两种模式可以帮助我们根据应用的需求选择最适合的渲染方式。

静态生成

静态生成适用于那些内容不会经常改变的页面。在这种模式下，Next.js 会在构建时生成静态 HTML 文件。

示例：静态生成页面

假设我们需要创建一个博客列表页面，内容很少变化。我们可以这样设置：

// www.javascriptcn.com code example
// pages/blog.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/blogs');
  const data = await res.json();

  return {
    props: {
      blogs: data,
    },
  };
}

export default function Blog({ blogs }) {
  return (
    <div>
      <h1>博客列表</h1>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </div>
  );
}

服务器端渲染

服务器端渲染适用于那些内容需要根据请求动态生成的页面。在这种模式下，Next.js 会在每次请求时重新渲染页面。

示例：服务器端渲染页面

假设我们需要创建一个展示天气预报的页面，内容会根据用户的位置实时更新。我们可以这样设置：

// www.javascriptcn.com code example
// pages/weather.js
import { useEffect, useState } from 'react';

export default function Weather() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>;

  return (
    <div>
      <h1>天气预报</h1>
      <p>当前温度: {data.current.temp_c}°C</p>
    </div>
  );
}

自定义页面布局

在 Next.js 中，我们可以通过创建自定义布局组件来复用页面的布局设计。这有助于提高代码的可维护性和一致性。

示例：创建自定义布局

假设我们需要创建一个包含导航栏和页脚的通用布局。步骤如下：

创建一个名为 components/Layout.js 的新文件，并添加以下代码：

// www.javascriptcn.com code example
// components/Layout.js
import Header from './Header';
import Footer from './Footer';

const Layout = ({ children }) => (
  <div>
    <Header />
    <main>{children}</main>
    <Footer />
  </div>
);

export default Layout;

在需要使用该布局的页面中导入并使用它。例如，在 pages/index.js 中：

// www.javascriptcn.com code example
// pages/index.js
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>首页</h1>
        <p>欢迎来到我们的网站！</p>
      </div>
    </Layout>
  );
}

通过以上介绍，你应该对 Next.js 中的页面有了全面的理解。接下来，你可以根据实际需求来创建和优化你的页面了。