Setting Up Your Backend with Next.js for SaaS

In recent years, Next.js has emerged as one of the most powerful frameworks for building React applications, especially for SaaS (Software as a Service) projects. Its features, such as server-side rendering, static site generation, and API routes, make it a perfect choice for building a scalable and performant backend. In this blog post, we will walk you through the process of setting up your backend with Next.js tailored for a SaaS application. We will cover aspects from project setup to database integration, authentication, and deploying your application.

Table of Contents

• 1. Understanding SaaS Architecture
• 2. Setting Up Your Next.js Project
• 3. Creating API Routes
• 4. Integrating a Database
• 5. Implementing Authentication
• 6. Handling Environment Variables
• 7. Deploying Your SaaS Application
• 8. Conclusion

1. Understanding SaaS Architecture

A SaaS application typically consists of three main components:

1. Frontend: The client-facing part that users interact with.
2. Backend: The server-side application that handles business logic, data storage, and API functionalities.
3. Database: The data layer where user information and application data is stored.

In a microservices architecture, each of these components can be developed and maintained independently. However, when using Next.js for your backend, you can efficiently handle both the server-side logic and client-side rendering in a single application.

2. Setting Up Your Next.js Project

The first step in building your SaaS application with Next.js is to set up your project. Make sure you have Node.js installed, then run the following command to create your new Next.js application:

npx create-next-app your-saas-app
cd your-saas-app

This command will scaffold a new Next.js project in a directory called your-saas-app.

Next, you can install essential packages that will support your backend, such as:

npm install axios dotenv mongoose bcryptjs jsonwebtoken

• axios: For making HTTP requests.
• dotenv: For handling environment variables.
• mongoose: For MongoDB object modeling.
• bcryptjs: For hashing passwords.
• jsonwebtoken: For creating JSON web tokens for authentication.

3. Creating API Routes

Next.js allows you to create API routes inside the pages/api folder. These routes can handle various HTTP requests like GET, POST, PUT, and DELETE.

Example: Creating a User API

Create a new file pages/api/users.js:

import dbConnect from '../../utils/dbConnect';
import User from '../../models/User';

export default async function handler(req, res) {
    await dbConnect();

    if (req.method === 'POST') {
        try {
            const user = await User.create(req.body);
            res.status(201).json({ success: true, data: user });
        } catch (error) {
            res.status(400).json({ success: false });
        }
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
}

DB Connection

Create a utility function for database connection:

// utils/dbConnect.js
import mongoose from 'mongoose';

const dbConnect = async () => {
    if (mongoose.connection.readyState >= 1) {
        return;
    }
    await mongoose.connect(process.env.MONGODB_URI, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    });
};

export default dbConnect;

User Model

Define a user model with Mongoose:

// models/User.js
import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, 'Please add a name']
    },
    email: {
        type: String,
        required: [true, 'Please add an email'],
        unique: true
    },
    password: {
        type: String,
        required: [true, 'Please add a password']
    },
}, { timestamps: true });

export default mongoose.models.User || mongoose.model('User', UserSchema);

4. Integrating a Database

For this example, we will be using MongoDB as our database. If you don’t have a MongoDB instance, you can create one using MongoDB Atlas.

Once you have your MongoDB URI, add it to your environment variable configuration file called .env.local:

MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/yourdbname?retryWrites=true&w=majority

5. Implementing Authentication

Authentication is a crucial part of any SaaS application. We are going to use JSON Web Tokens (JWT) for managing authentication in our application.

User Registration

Update the user API to handle user registration:

// pages/api/users.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';

// Inside your handler function
if (req.method === 'POST') {
    const { name, email, password } = req.body;
  
    // Hash the password
    const hashedPassword = await bcrypt.hash(password, 10);
  
    // Create the user with hashed password
    const user = await User.create({ name, email, password: hashedPassword });
  
    // Create a JWT token
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
    
    res.status(201).json({ success: true, data: user, token });
}

User Login

Create another API route for user login:

// pages/api/login.js
import User from '../../models/User';
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';

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

        const user = await User.findOne({ email });
        
        if (!user || !(await bcrypt.compare(password, user.password))) {
            return res.status(401).send('Invalid credentials');
        }

        const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
        return res.status(200).json({ success: true, token });
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
}

Middleware for Protecting Routes

You might want to protect certain API routes only accessible to authenticated users. You can create middleware to check the token:

// middleware/auth.js
import jwt from 'jsonwebtoken';

export const authenticate = (req, res, next) => {
    const token = req.headers['authorization']?.split(' ')[1];

    if (!token) {
        return res.status(401).json({ message: 'Unauthorized' });
    }

    jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
        if (err) {
            return res.status(403).json({ message: 'Forbidden' });
        }
        req.user = user;
        next();
    });
};

6. Handling Environment Variables

To maintain security and configurability, you should use environment variables for your sensitive data such as API keys, database URIs, and secrets. You can manage these variables in a .env.local file in your project root for local development. In production, configure these variables in your hosting dashboard.

Here’s a list of environment variables you might need:

MONGODB_URI=<Your MongoDB URI>
JWT_SECRET=<Your JSON Web Token Secret>

7. Deploying Your SaaS Application

Once you've completed building your application, it’s time to deploy it. Next.js applications can be deployed in various ways, and some suitable options for SaaS applications include Vercel, AWS, and DigitalOcean.

Deploying with Vercel

Vercel is the platform created by the creators of Next.js, and deploying your Next.js app to Vercel is straightforward:

1. Sign up for a Vercel account.
2. Connect your GitHub, GitLab, or Bitbucket repository.
3. Vercel will automatically detect your Next.js app and guide you through the deployment process.

During the deployment setup, you will also have the option to set environment variables that your application will need.

Deploying with AWS or DigitalOcean

If you prefer more control or are already familiar with server administration, you could deploy your Next.js app on AWS using services like EC2, or on DigitalOcean. You would need to set up a Node.js server and configure it to run your Next.js application.

Follow the respective documentation of each service to ensure that you set up your environment, including the installations for Node.js and any necessary build configurations.

8. Conclusion

In this blog post, we covered how to set up a backend for a SaaS application using Next.js. We explored the fundamental components of building a complete backend, including API routes, database integration with MongoDB, implementing authentication, and deploying the application.

Next.js offers an efficient way to manage both frontend and backend concerns in a single framework, which can significantly speed up development and streamline your tech stack. As you dive deeper into building your SaaS application, keep exploring the myriad features that Next.js and modern web technologies have to offer!

Happy coding!