# Build a Full-Stack Next.js Application

# Create a simple todo app with Remult using Next.js

In this tutorial, we are going to create a simple app to manage a task list. We'll use Next.js, and Remult as our full-stack CRUD framework. For deployment to production, we'll use Heroku and a PostgreSQL database.

By the end of the tutorial, you should have a basic understanding of Remult and how to use it to accelerate and simplify full stack app development.

# Prerequisites

This tutorial assumes you are familiar with TypeScript, React and Next.js.

Before you begin, make sure you have Node.js (opens new window) and git (opens new window) installed.

# Setup for the Tutorial

This tutorial requires setting up a Next.js project and a few lines of code to add Remult.

You can either use a starter project to speed things up, or go through the step-by-step setup.

# Option 1: Clone the Starter Project

Clone the remult-nextjs-todo repository from GitHub and install its dependencies.

git clone https://github.com/remult/remult-nextjs-todo.git
cd remult-nextjs-todo
yarn

Open your IDE.
Open a terminal and run the dev npm script.

yarn dev

The default Next.js app main screen should be displayed.

At this point, our starter project is up and running. We are now ready to move to the next step of the tutorial and start creating the task list app.

# Option 2: Step-by-step Setup

# Create a React project

Create the new Next.js project.

npx create-next-app@latest remult-nextjs-todo --typescript
cd remult-nextjs-todo

# Install required packages

We need axios (opens new window) to serve as an HTTP client, and, of course, Remult. We'll also need Express as it is currently a required by Remult as a peer dependency (this peer dependency will be removed in future versions).

yarn add axios remult

# Bootstrap Remult in the back-end

Remult is bootstrapped in a Next.js app by adding it the remultServer API middleware (opens new window) to a catch all dynamic API route (opens new window).

Open your IDE.
Create a folder named src in the project's root.
Create a folder named server in the src folder
Create an api.ts file in the src/server folder with the following code:

src/server/api.ts

import { createRemultServer } from "remult/server";

export const api = createRemultServer({})

Add a file named [...remult].ts in the folder pages/api. This file is a "catch all" Next.js API route which will be used to handle all API requests.

pages/api/[...remult].ts

import { NextApiRequest, NextApiResponse } from 'next'
import { api } from '../../src/server/api';

const handler = async (_req: NextApiRequest, res: NextApiResponse) => {
    await api.handle(_req, res);;
}

export default handler

# Bootstrap Remult in the front-end

In the React app we'll be using a global Remult object to communicate with the API server via a Promise-based HTTP client (in this case - Axios).

Create a common.ts file in the src/ folder with the following code:

src/common.ts

import axios from "axios";
import { Remult } from "remult";

export const remult = new Remult(axios);

# Final tweaks

Our full stack starter project is almost ready. Let's complete these final configurations.

# Enable TypeScript decorators

Add the following entry to the compilerOptions section of the tsconfig.json file to enable the use of decorators in the React app.

tsconfig.json

"experimentalDecorators": true,
"emitDecoratorMetadata": true

# Run the app

Open a terminal and start the app.

yarn dev

The default Next.js main screen should be displayed.

# Setup completed

At this point, our starter project is up and running. We are now ready to move to the next step of the tutorial and start creating the task list app.

Entities →