# 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/nextjs-starter.git remult-nextjs-todo
cd remult-nextjs-todo
npm install
- Open your IDE.
- Open a terminal and run the
dev
npm script.
npm run 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 Next.js project
Create the new Next.js project.
npx -y create-next-app@latest remult-nextjs-todo --typescript
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 (opens new window), that passes the handling of requests to an object created using the createRemultServer
function.
Open your IDE.
Create a folder named
src
in the project's root.Create a folder named
server
in thesrc
folderCreate an
api.ts
file in thesrc/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 folderpages/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
# 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.
npm run 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 →