The best way to learn a tool like React is to build something with it. Next.js is a powerful framework that helps you build for production. In this tutorial, we’ll learn how to build a clone of Twitter using Next.js and Prisma.

Our app will have the following features:

• authentication using NextAuth and Twitter OAuth
• an option to add a new tweet
• an option to view a list of tweets
• an option to view the profile of a user with only their tweets

The code for the app we’ll be building is available on GitHub. We’ll be using TypeScript to build our app.

Preliminaries

Next.js is one of the most popular React.js frameworks. It has a lot of features like server-side rendering, TypeScript support, image optimization, I18n support, file-system routing, and more.

Prisma is an ORM for Node.js and TypeScript. It also provides a lot of features like raw database access, seamless relation API, native database types, and so on.

Software required

We’ll need the following installed for the purposes of running our app:

These technologies will be used in the app:

• Next.js: for building our app
• Prisma: for fetching and saving data into the database
• Chakra UI: for adding styles to our app
• NextAuth: for handling authentication
• React Query: for fetching and updating data in our app

Creating a new Next.js App

Now, let’s get started! We’ll first create a new Next.js app by running the following command from our terminal:

yarn create next-app

We’ll need to enter the name of the app when the command prompts for it. We can name it anything we want. However, in this case, I’ll name it twitter-clone. We should be able to see a similar output on our terminal:

$ yarn create next-app

yarn create v1.22.5
[1/4]