avatarCaleb

Summary

This tutorial guides users through building a secure application using TypeScript with Next.js and Prisma, creating a simple blog with user authentication and a Post model.

Abstract

The tutorial starts by setting up Next.js with TypeScript, then introduces Prisma, an open-source database toolkit, and its Prisma Client. It guides users through installing and configuring PostgreSQL for data persistence and defining a Post model with Prisma. The tutorial concludes by integrating Prisma with Next.js and demonstrating how to query the database with Prisma Client.

Bullet points

  • The tutorial aims to build a secure full-stack application using TypeScript, Next.js, and Prisma.
  • The application will be a simple blog with user authentication and a Post model.
  • Users are required to have Node.js, npm, VS Code, PostgreSQL (or another supported SQL database), and basic knowledge of TypeScript.
  • The tutorial begins by setting up a new Next.js app with TypeScript.
  • Prisma, an open-source database toolkit, is introduced, and its Prisma Client is installed.
  • PostgreSQL is installed and configured for data persistence.
  • A Post model is defined with Prisma.
  • Prisma is integrated with Next.js, and the tutorial demonstrates how to query the database with Prisma Client.

Unlocking the Power of Next.js and Prisma: Full-Stack TypeScript Mastery

We’re going to create a simple blog with user authentication and a Post model

Welcome!

This tutorial will guide you through building a secure application using TypeScript with Next.js and Prisma. We’re going to create a simple blog with user authentication and a Post model.

Table of Contents

  1. Setting up Next.js with TypeScript
  2. Introduction to Prisma
  3. Starting PostgreSQL
  4. Defining the Post model with Prisma
  5. Integrating Prisma with Next.js

Prerequisites

Before diving in, ensure you have the following:

1. Setting up Next.js with TypeScript

Start by initializing a new Next.js app with TypeScript:

npx create-next-app my-app --typescript
cd my-app

2. Introduction to Prisma

Prisma is an open-source database toolkit. It includes Prisma Client, which is an auto-generated query builder for TypeScript & Node.js.

Install the Prisma CLI:

npm install prisma --save-dev
npx prisma init

This will create a prisma directory with two files: schema.prisma (your data model) and .env (your environment variables).

You should see something like this in your terminal:

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

3. Starting PostgreSQL

To run and manage PostgreSQL, it largely depends on how you’ve installed it:

For Linux (using systemctl):

systemctl start postgresql

To enable it to start on boot:

systemctl enable postgresql

For MacOS (using Homebrew):

brew services start postgresql

For Windows (using PGAdmin or Services app):

  • PGAdmin: If you’ve installed PostgreSQL with PGAdmin, you can start/stop the server using the PGAdmin interface.
  • Windows Services: Go to Control Panel > Administrative Tools > Services, then locate the PostgreSQL service and start it.

For Docker: If you are using Docker, the command might look something like this:

docker start [container_name_or_id]

Verifying the PostgreSQL Server is Running

You can verify that PostgreSQL is running by trying to enter its interactive terminal:

psql -U postgres

If you’re prompted for a password or are entered into the PostgreSQL prompt, then the service is running.

4. Defining the Post model with Prisma

Inside schema.prisma, define a Post model:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}

Run migrations to update your database:

npx prisma migrate dev

5. Integrating Prisma with Next.js

First, install Prisma Client:

npm install prisma --save-dev

Now, inside your Next.js project, you can query your database with Prisma Client. Let’s fetch all published posts for example:

In pages/index.tsx:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function getServerSideProps() {
  const posts = await prisma.post.findMany({
    where: {
      published: true
    }
  });

  return {
    props: { posts }
  };
}

// Your React component can now use the 'posts' prop to display them.

Conclusion

Congrats! You’ve just built a secure full-stack application using TypeScript, Next.js, and Prisma.

You now have a solid foundation to continue expanding, adding more features, and refining your app.

Enjoyed the read? For more on Web Development, JavaScript, Next.js, Cybersecurity, and Blockchain, check out my other articles here:

If you have questions or feedback, don’t hesitate to reach out at [email protected] or in the comments section.

[Disclosure: Every article I pen is a fusion of my ideas and the supportive capabilities of artificial intelligence. While AI assists in refining and elaborating, the core thoughts and concepts stem from my perspective and knowledge. To know more about my creative process, read this article.]

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

JavaScript
Nextjs
Programming
Web Development
Startup
Recommended from ReadMedium