Fullstack Example with Next.js (REST API)

This example shows how to implement a fullstack app in TypeScript with Next.js using React (frontend), Express and Prisma Client (backend). The example comes from the following [prisma example code]https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-express

Getting Started

1. Install dependencies

Install npm dependencies:

Install dependencies for your backend. Open a terminal window and install the backend's dependencies

cd backend
npm install

Open a separate terminal window and navigate to your frontend directory and install its dependencies

cd frontend
npm install

2. Create and seed the database (backend)

On the terminal window used to install the backend npm dependencies, run the following command to create your SQL Tables. This creates the User , Post , Catergory and CatergoriesOnPosts tables that are defined in prisma/schema.prisma:

npx prisma migrate dev --name init

When npx prisma migrate dev is executed against a newly created database, seeding is also triggered. The seed file in prisma/seed.ts will be executed and your database will be populated with the sample data.

3. Start the server (backend)

On the same terminal used in step 2, run the following command to start the server:

npm run dev

The server is now running at http://localhost:3001/.

4. Start the app (frontend)

On the terminal window used to install frontend npm dependencies, run the following command to start the app:

npm run dev

The app is now running, navigate to http://localhost:3000/ in your browser to explore its UI.

Expand for a tour through the UI of the app

Blog (located in ./pages/index.tsx)

Signup (located in ./pages/signup.tsx)

Create post (draft) (located in ./pages/create.tsx)

Drafts (located in ./pages/drafts.tsx)

View post (located in ./pages/p/[id].tsx) (delete or publish here)

Using the REST API

You can also access the REST API of the API server directly. It is running localhost:3001 and you can see the API documentation in localhost:3001/api-doc