掌握 Next.js 脚手架精髓，轻松打造全栈应用

2023-09-07 10:17:13

导言

Next.js 是一个非常流行的前端框架，它可以帮助我们快速构建出高性能的 React 应用。Next.js 自带脚手架，可以帮助我们快速搭建出项目的基本结构。但是，Next.js 脚手架默认只包含前端代码，如果我们要构建一个全栈应用，还需要手动添加后端代码和数据库。

扩展 Next.js 脚手架为全栈脚手架

为了将 Next.js 脚手架扩展为全栈脚手架，我们需要添加以下内容：

后端代码：我们可以使用 Node.js 和 Express 框架来构建后端 API。
数据库：我们可以使用 MongoDB 或 PostgreSQL 作为数据库。
数据库模型：我们需要定义数据库模型，以便我们能够在代码中操作数据库。
路由：我们需要定义路由，以便我们能够在浏览器中访问不同的页面。
认证：我们需要添加认证功能，以便我们能够控制用户对不同页面的访问权限。
部署：我们需要将我们的应用部署到服务器上，以便其他人能够访问它。

详细步骤

安装必要的依赖

npm install next react-dom express mongoose

创建数据库模型

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String
});

const User = mongoose.model('User', userSchema);

定义路由

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.get('/users', (req, res) => {
  User.find({}, (err, users) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.send(users);
    }
  });
});

app.listen(3000);

添加认证功能

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;

passport.use(new LocalStrategy({
  usernameField: 'email',
  passwordField: 'password'
}, (email, password, done) => {
  User.findOne({ email: email }, (err, user) => {
    if (err) {
      return done(err);
    }

    if (!user) {
      return done(null, false, { message: 'Incorrect email.' });
    }

    if (!user.validPassword(password)) {
      return done(null, false, { message: 'Incorrect password.' });
    }

    return done(null, user);
  });
}));

app.use(passport.initialize());
app.use(passport.session());

app.post('/login', passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/login'
}));

app.get('/logout', (req, res) => {
  req.logout();
  res.redirect('/');
});