Page 1: Project Structuring and Setup

1. Project Structuring and Setup

Deploying a full-stack application with Next.js and Express.js on Vercel requires careful project structuring. We will primarily focus on a monorepo setup for simplicity.

1.1. Monorepo Structure Example

A common setup involves keeping both frontend (Next.js) and backend (Express.js) in the same repository. Vercel automatically detects Next.js projects, and we'll configure Express.js as a serverless API.

my-fullstack-app/
├── nextjs-frontend/
│   ├── pages/
│   ├── public/
│   ├── package.json
│   └── next.config.js
├── api/
│   ├── index.js # Your Express.js entry point
│   └── package.json
├── .gitignore
└── vercel.json # Vercel configuration file

1.2. Express.js Setup in the 'api' Directory

Inside the api/ directory, create an index.js file as your Express.js entry point. This will be treated as a Vercel Serverless Function.

// api/index.js
const express = require('express');
const app = express();
app.use(express.json());
app.get('/api/hello', (req, res) => {
  res.status(200).send('Hello from Express.js API!');
});
app.listen(3001, () => console.log('Express API listening on port 3001'));
module.exports = app; // Important for Vercel serverless functions

Create a package.json in api/:

// api/package.json
{
  "name": "express-api",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1"
  }
}