Blog: honest legacy-marking of 2021 Next.js + GraphQL + Prisma tutorial

apps/blog/content/blog/fullstack-nextjs-graphql-prisma-oklidw1rhw/index.mdx

@@ -2,10 +2,11 @@
 title: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Data Modeling"
 slug: "fullstack-nextjs-graphql-prisma-oklidw1rhw"
 date: "2021-08-18"
+updatedAt: "2026-07-09"
 authors:
   - "Mahmoud Abdelwahab"
-metaTitle: "Fullstack app with TypeScript, Next.js, Prisma & GraphQL"
-metaDescription: "Build a fullstack app using TypeScript, PostgreSQL, Next.js, GraphQL and Prisma. In this article we're going to create the app's data model"
+metaTitle: "Fullstack Next.js, GraphQL & Prisma 4 Tutorial (2021)"
+metaDescription: "Part 1 of a 2021 course building a fullstack app with Next.js (Pages Router), GraphQL, Prisma 4, and PostgreSQL: data modeling, migrations, and seeding."
 metaImagePath: "/fullstack-nextjs-graphql-prisma-oklidw1rhw/imgs/meta-1ec6d4e3035143375360a59242258c3c93609907-1269x714.png"
 heroImagePath: "/fullstack-nextjs-graphql-prisma-oklidw1rhw/imgs/hero-cf0efe94442ee755fc47d4c085a10f2b453c74a6-844x475.svg"
 heroImageAlt: "Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Data Modeling"
@@ -15,27 +16,9 @@ tags:
   - "education"
 ---
 
-This article is the first part of a course where we build a fullstack app with Next.js, GraphQL, TypeScript,Prisma and PostgreSQL. In this article, we'll create the data model and explore the different components of Prisma.
-
-## Table of contents
-
-- [Introduction](#introduction)
-  - [What the course will cover](#what-the-course-will-cover)
-  - [What you will learn today](#what-you-will-learn-today)
-- [Prerequisites](#prerequisites)
-  - [Assumed knowledge](#assumed-knowledge)
-  - [Development environment](#development-environment)
-- [Clone the repository](#clone-the-repository)
-  - [A look at the project structure and dependencies](#a-look-at-the-project-structure-and-dependencies)
-- [Creating the data model for the app](#creating-the-data-model-for-the-app)
-  - [Add Prisma to your project](#add-prisma-to-your-project)
-  - [Create your database schema with Prisma](#create-your-database-schema-with-prisma)
-  - [Defining the models](#defining-the-models)
-  - [Defining relations](#defining-relations)
-- [Migrating and pushing changes to the database](#migrating-and-pushing-changes-to-the-database)
-- [Seeding the database](#seeding-the-database)
-- [Use Prisma Studio to explore your database](#use-prisma-studio-to-explore-your-database)
-- [Summary and next steps](#summary-and-next-steps)
+This is part 1 of a five-part course from 2021 that builds "awesome-links", a fullstack link-bookmarking app with Next.js (Pages Router), GraphQL, TypeScript, Prisma, and PostgreSQL. In this part, you define the app's data model with Prisma, run your first migration, and seed the database.
+
+> **Updated (July 2026):** This tutorial was written for Next.js with the Pages Router, Prisma 4, TypeScript 4, and Tailwind CSS 3. Those versions are several majors old. The concepts (data modeling, migrations, seeding) still hold, but commands and APIs have changed since. For a current setup, start with the [Prisma getting started guide](https://www.prisma.io/docs/getting-started).
 
 ## Introduction
 
@@ -96,7 +79,7 @@ By the end of this article you will have a Next.js app that is connected to a da
 
 To follow along with this course you need to have Node.js installed on your machine. You will also need to have a running PostgreSQL instance.
 
-> **Note**: You can set up PostgreSQL [locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or create a hosted instance on [Heroku](https://dev.to/prisma/how-to-setup-a-free-postgresql-database-on-heroku-1dc1). A remote database will be required for deployment chapter.
+> **Note**: You can set up PostgreSQL [locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or create a hosted instance, for example with [Prisma Postgres](https://www.prisma.io/docs/postgres). A remote database will be required for the deployment chapter.
 
 <Youtube videoId="7ihvEtBAjRY" />
 
@@ -207,7 +190,7 @@ Open the `.env` file and replace the dummy connection URL with the connection UR
 ```
 // .env
 
-# Example: postgresql://giwuzwpdnrgtzv:d003c6a604bb400ea955c3abd8c16cc98f2d909283c322ebd8e9164b33ccdb75@ec2-54-170-123-247.eu-west-1.compute.amazonaws.com:5432/d6ajekcigbuca9
+# Example: postgresql://USER:PASSWORD@HOST:5432/DATABASE?sslmode=require
 DATABASE_URL="<your-database-connection-string>"
 ```
 The database URL you just added has the following structure:
@@ -271,7 +254,7 @@ enum Role {
 
 Here we defined a `User` model with several fields. Each field has a name followed by a type and [optional field attributes](https://www.prisma.io/docs/orm/prisma-schema/data-model/models#defining-fields).
 
-For example, the `id` field is of type `String` and has the `@id` field attribute, specifying that this is the primary key of the table. The `@default(uuid())` attribute sets a default [UUID](https://www.prisma.io/docs/orm/reference/prisma-schema-reference#uuid) value.
+For example, the `id` field is of type `Int` and has the `@id` field attribute, specifying that this is the primary key of the table. The `@default(autoincrement())` attribute sets an auto-incrementing [default value](https://www.prisma.io/docs/orm/reference/prisma-schema-reference#default).
 
 All fields are required by default. To make a field optional, you can add a `?` after the field type.