跳到主要内容

Next.js 在线学习平台

介绍​

Next.js 是一个基于 React 的框架，提供了服务器端渲染（SSR）、静态生成（SSG）和客户端渲染（CSR）等功能。它非常适合构建高性能的现代 Web 应用。在本教程中，我们将通过构建一个在线学习平台，深入理解 Next.js 的核心功能，并掌握如何将其应用于实际项目中。

项目概述​

我们的在线学习平台将包含以下功能：

  • 课程列表页面：展示所有可用的课程。
  • 课程详情页面：显示课程的详细信息。
  • 用户登录和注册：允许用户创建账户并登录。
  • 课程购买：用户可以选择购买课程。

项目搭建​

首先，我们需要创建一个新的 Next.js 项目。打开终端并运行以下命令：

bash
npx create-next-app@latest nextjs-learning-platform
cd nextjs-learning-platform

这将创建一个新的 Next.js 项目，并进入项目目录。

页面路由​

Next.js 使用文件系统路由，这意味着在 pages 目录下的文件会自动成为路由。例如，pages/index.js 对应的是根路由 /，而 pages/courses/[id].js 对应的是动态路由 /courses/:id。

创建课程列表页面​

在 pages/courses/index.js 中创建一个课程列表页面：

javascript
import Link from 'next/link';

const courses = [
  { id: 1, title: 'Next.js 入门', description: '学习 Next.js 的基础知识' },
  { id: 2, title: 'React 高级技巧', description: '深入理解 React 的高级概念' },
];

export default function Courses() {
  return (
    <div>
      <h1>课程列表</h1>
      <ul>
        {courses.map((course) => (
          <li key={course.id}>
            <Link href={`/courses/${course.id}`}>
              <a>{course.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

创建课程详情页面​

在 pages/courses/[id].js 中创建一个课程详情页面：

javascript
import { useRouter } from 'next/router';

const courses = [
  { id: 1, title: 'Next.js 入门', description: '学习 Next.js 的基础知识' },
  { id: 2, title: 'React 高级技巧', description: '深入理解 React 的高级概念' },
];

export default function CourseDetail() {
  const router = useRouter();
  const { id } = router.query;
  const course = courses.find((c) => c.id === parseInt(id));

  if (!course) {
    return <div>课程未找到</div>;
  }

  return (
    <div>
      <h1>{course.title}</h1>
      <p>{course.description}</p>
    </div>
  );
}

数据获取​

Next.js 提供了多种数据获取方式，包括 getStaticProps、getServerSideProps 和 getStaticPaths。我们将使用 getStaticProps 来预渲染课程列表页面。

使用 getStaticProps 预渲染页面​

在 pages/courses/index.js 中，我们可以使用 getStaticProps 来获取课程数据：

javascript
export async function getStaticProps() {
  const courses = [
    { id: 1, title: 'Next.js 入门', description: '学习 Next.js 的基础知识' },
    { id: 2, title: 'React 高级技巧', description: '深入理解 React 的高级概念' },
  ];

  return {
    props: {
      courses,
    },
  };
}

export default function Courses({ courses }) {
  return (
    <div>
      <h1>课程列表</h1>
      <ul>
        {courses.map((course) => (
          <li key={course.id}>
            <Link href={`/courses/${course.id}`}>
              <a>{course.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

用户认证​

为了实现用户登录和注册功能，我们可以使用 Next.js 的 API 路由。在 pages/api 目录下创建 auth.js 文件：

javascript
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    // 这里可以添加用户认证逻辑
    if (email === '[email protected]' && password === 'password') {
      res.status(200).json({ message: '登录成功' });
    } else {
      res.status(401).json({ message: '认证失败' });
    }
  } else {
    res.status(405).json({ message: '方法不允许' });
  }
}

创建登录页面​

在 pages/login.js 中创建一个登录页面：

javascript
import { useState } from 'react';
import { useRouter } from 'next/router';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();

    const response = await fetch('/api/auth', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });

    const data = await response.json();

    if (response.ok) {
      router.push('/');
    } else {
      alert(data.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="邮箱"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
}

部署​

完成开发后，我们可以将项目部署到 Vercel。首先，确保你已经安装了 Vercel CLI：

bash
npm install -g vercel

然后，在项目根目录下运行以下命令：

bash
vercel

按照提示完成部署。

总结​

通过本教程，我们构建了一个简单的 Next.js 在线学习平台，涵盖了页面路由、数据获取、用户认证等核心功能。希望你能通过这个项目掌握 Next.js 的基本用法，并能够将其应用到更复杂的项目中。

附加资源​

练习​

  1. 尝试为课程详情页面添加评论功能。
  2. 使用 getServerSideProps 替换 getStaticProps，并观察页面加载速度的变化。
  3. 添加用户注册功能，并扩展用户认证逻辑。
提示

在开发过程中，记得使用 next dev 命令启动开发服务器，并实时查看更改效果。