Next.js 管理后台

介绍

在现代 Web 开发中，管理后台是一个常见的需求。无论是内容管理系统（CMS）、电子商务平台，还是数据分析工具，管理后台都是核心部分。Next.js 是一个基于 React 的框架，提供了服务器端渲染（SSR）、静态生成（SSG）和 API 路由等功能，非常适合构建管理后台。

本文将带你从零开始，使用 Next.js 构建一个简单的管理后台。我们将涵盖以下内容：

项目初始化
页面路由
数据获取
用户认证
权限管理
实际案例

项目初始化

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

bash
npx create-next-app@latest nextjs-admin-dashboard

这将创建一个名为 nextjs-admin-dashboard 的新项目。进入项目目录并启动开发服务器：

bash
cd nextjs-admin-dashboard
npm run dev

现在，你可以在浏览器中访问 http://localhost:3000，看到默认的 Next.js 欢迎页面。

页面路由

Next.js 使用文件系统路由。这意味着你可以在 pages 目录下创建文件，这些文件会自动成为路由。例如，pages/index.js 对应根路径 /，pages/about.js 对应 /about。

让我们创建一个简单的管理后台页面。在 pages 目录下创建一个新文件 dashboard.js：

javascript
// pages/dashboard.js
export default function Dashboard() {
  return (
    <div>
      <h1>管理后台</h1>
      <p>欢迎来到管理后台！</p>
    </div>
  );
}

现在，访问 http://localhost:3000/dashboard，你将看到管理后台页面。

数据获取

管理后台通常需要从服务器获取数据。Next.js 提供了多种数据获取方法，包括 getStaticProps、getServerSideProps 和 API 路由。

让我们使用 getServerSideProps 从服务器获取数据。假设我们有一个 API 端点 /api/users，返回用户列表。

javascript
// pages/dashboard.js
export default function Dashboard({ users }) {
  return (
    <div>
      <h1>管理后台</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/api/users');
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}

在这个例子中，getServerSideProps 在每次请求时都会从服务器获取用户数据，并将其作为 props 传递给 Dashboard 组件。

用户认证

管理后台通常需要用户认证。我们可以使用 Next.js 的 API 路由和 JWT（JSON Web Token）来实现用户认证。

首先，创建一个登录页面 pages/login.js：

javascript
// pages/login.js
import { useState } from 'react';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });
    const data = await res.json();
    if (data.token) {
      localStorage.setItem('token', data.token);
      window.location.href = '/dashboard';
    }
  };

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

接下来，创建一个 API 路由 pages/api/login.js 来处理登录请求：

javascript
// pages/api/login.js
import jwt from 'jsonwebtoken';

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;
    // 这里应该验证用户凭据
    if (email === '[email protected]' && password === 'password') {
      const token = jwt.sign({ email }, 'your-secret-key', { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

权限管理

在管理后台中，权限管理是必不可少的。我们可以使用 JWT 来验证用户权限，并根据权限控制页面访问。

在 pages/dashboard.js 中，我们可以添加一个检查用户是否已登录的逻辑：

javascript
// pages/dashboard.js
import { useEffect } from 'react';

export default function Dashboard({ users }) {
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      window.location.href = '/login';
    }
  }, []);

  return (
    <div>
      <h1>管理后台</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps(context) {
  const token = context.req.cookies.token;
  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  const res = await fetch('http://localhost:3000/api/users');
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}

实际案例

假设我们正在构建一个简单的博客管理后台。用户可以登录、创建、编辑和删除博客文章。我们可以使用 Next.js 和上述技术来实现这个功能。

创建博客文章

创建一个页面 pages/posts/new.js，允许用户创建新的博客文章：

javascript
// pages/posts/new.js
import { useState } from 'react';

export default function NewPost() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch('/api/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
      },
      body: JSON.stringify({ title, content }),
    });
    const data = await res.json();
    if (data.id) {
      window.location.href = '/posts';
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="标题"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <textarea
        placeholder="内容"
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <button type="submit">创建</button>
    </form>
  );
}

显示博客文章

创建一个页面 pages/posts/index.js，显示所有博客文章：

javascript
// pages/posts/index.js
export default function Posts({ posts }) {
  return (
    <div>
      <h1>博客文章</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/api/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

总结

通过本文，你已经学会了如何使用 Next.js 构建一个简单的管理后台。我们从项目初始化开始，逐步讲解了页面路由、数据获取、用户认证和权限管理。最后，我们通过一个实际案例展示了如何将这些技术应用到博客管理后台中。

附加资源

练习

扩展博客管理后台，添加编辑和删除博客文章的功能。
实现一个用户角色系统，不同角色的用户有不同的权限。
使用 getStaticProps 或 getStaticPaths 优化博客文章的加载性能。

希望你能通过这些练习进一步巩固所学知识，并构建出更复杂的管理后台！

介绍​

项目初始化​

页面路由​

数据获取​

用户认证​

权限管理​

实际案例​

创建博客文章​

显示博客文章​

总结​

附加资源​

练习​

介绍