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 Vercel and a Supabase 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 and git 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 ​

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

git clone https://github.com/remult/nextjs-starter.git remult-nextjs-todo
cd remult-nextjs-todo
npm install

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

npm run dev

The default Next.js app main screen should be displayed (except for the styles which were modified for the tutorial).

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 Next.js project ​

1. Create the new Next.js project.

npx -y create-next-app@latest remult-nextjs-todo --typescript --src-dir

Answer the questions as follows:

√ What is your project named? ... remult-nextjs-todo
√ Would you like to use TypeScript with this project? ... Yes
√ Would you like to use ESLint with this project? ... No 
√ Would you like to use Tailwind CSS with this project? ... No 
√ Would you like to use `src/` directory with this project? ...  Yes
√ Use App Router (recommended)? ... No 
√ Would you like to customize the default import alias? ... No / Yes

2. Go to the created folder.

cd remult-nextjs-todo

Install Remult ​

npm i remult

Bootstrap Remult in the back-end ​

Remult is bootstrapped in a Next.js using a catch all dynamic API route, that passes the handling of requests to an object created using the remultNext function.

1. Open your IDE.

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

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

import { remultNext } from "remult/remult-next"

export default remultNext({})

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

{
...
  "compilerOptions": {
    ...
    "experimentalDecorators": true // add this
   ...
  }
...
}

Run the app ​

Open a terminal and start the app.

npm run dev

The default Next.js main screen should be displayed.

Remove Next.js default styles ​

The Next.js default styles won't fit our todo app. If you'd like a nice-looking app, replace the contents of src/styles/globals.css with this CSS file. Otherwise, you can simply delete the contents of src/styles/globals.css.

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.