Let's build a production-ready learning platform with practical step-by-step guides using Next.js, Tailwind CSS, Prisma, PostgreSQL, and YouTube API.

In this guide, we will create a new Next.js project with the app directory, as well as set up Tailwind CSS that we will use to style our learning platform.

To create a new next.js app with the new app directory, we will use the `--experimental-app` flag as the `/app` dir is still an **experimental** feature.

Open your terminal and navigate to your working directory for me it's `cd ~/Documents/workspace/` then we'll run `npx create-next-app@latest --experimental-app` to create our project.

The script will ask us for the project name let's give it `nextjs-learning-platform`, then choose the default answers for other configurations.

**Note**: While answering the script configurations, make sure that we use `TypeScript`, `ESLint`, `src/` dir, and `@/*` as an alias.

After the project is created, and its dependencies are installed, open the newly created project with your favorite editor.

By default `Git` is already initialized with an initial commit, so that's good, the next step is to set up Tailwind CSS and clean up the default home page.

Go back to your terminal, and make sure you're inside the project directory (`nextjs-learning-platform`), then run `npm install -D tailwindcss postcss autoprefixer` to install tailwindcss dependencies.

Once the previous command is completed, go ahead and run `npx tailwindcss init -p` to initialize the configuration files for `tailwind` and `postcss`. 

Now that we have installed and created the config files, we need to update the `tailwind.config.js` file with the following to tell tailwind what files it should include for its just-in-time compiler.

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{js,ts,jsx,tsx}'],
	theme: {
		extend: {},
	},
	plugins: [],
};

For a more detailed tutorial check this [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs) official guide.

Now it's time to include tailwind directives into our code source, to do first I like to use `SCSS` instead of just `CSS`.

To use `sass` first we need to install it as a dev dependency with `npm install -D sass`, then we'll rename `src/app/globals.css` to `src/app/globals.scss`, and finally update its import inside `src/app/layout.tsx`.

Now open `src/app/globals.scss` and delete all its content, replacing it with just TailwindCSS directives for now.

@tailwind base;
@tailwind components;
@tailwind utilities;

I like to always clean up the default content, and make it custom to my project, so in this section, we will change the head meta content, README.md, and add a simple `h1` title on the home page.

Open `src/app/head.tsx` and change the `<title>` content to something like **Next.js Learning Platform - For those who want to learn new skills** and change the meta description to something similar.

export default function Head() {
	return (
		<>
			<title>
				Next.js Learning Platform - For those who want to learn new skills
			</title>
			<meta content="width=device-width, initial-scale=1" name="viewport" />
			<meta
				name="description"
				content="A Learning Platform for those who want to learn new skills"
			/>
			<link rel="icon" href="/favicon.ico" />
		</>
	);
}


Now, let's clean our homepage, and remove the CSS module file `src/app/page.module.css`

import { Inter } from '@next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Home() {
	return (
		<main className={inter.className}>
			<div className="w-full mx-auto max-w-7xl">
				<h1 className="text-3xl">Welcome To Next.js Learning Platform</h1>
			</div>
		</main>
	);
}

One last touch I like is to create one config for `Prettier`, and another for `vscode` settings:

Feel free to ignore this one if you're not using `vscode`.

{
	"semi": false,
	"useTabs": true,
	"tabWidth": 2,
	"singleQuote": true,
	"trailingComma": "es5"
}

If you're curious please feel free to look up any one of them to see what they're doing but most of them are self-explanatory.

Before saving our change to Git, let's first run our app, and verify that we didn’t make any mistake by running `npm run dev` and opening http://localhost:3000/ in our browser.

Now, let's commit our changes to Git and move to the next guide: `git add .` to stage changed files. Then `git commit -m "set up tailwindcss with sass, and clean up default content"` to commit the changes.

Next, we'll work on [Setting up Prisma using PostgreSQL provider with Next.js](https://codersteps.com/guides/setting-up-prisma-using-postgresql-provider-with-next-js)

In this guide, we will create a new Next.js project with the app directory, as well as set up Tailwind CSS that we will use to style our learning platform.


To create a new next.js app with the new app directory, we will use the <code>--experimental-app</code> flag as the <code>/app</code> dir is still an <strong>experimental</strong> feature.


Open your terminal and navigate to your working directory for me it's <code>cd ~/Documents/workspace/</code> then we'll run <code>npx create-next-app@latest --experimental-app</code> to create our project.


The script will ask us for the project name let's give it <code>nextjs-learning-platform</code>, then choose the default answers for other configurations.


<strong>Note</strong>: While answering the script configurations, make sure that we use <code>TypeScript</code>, <code>ESLint</code>, <code>src/</code> dir, and <code>@/*</code> as an alias.


After the project is created, and its dependencies are installed, open the newly created project with your favorite editor.


By default <code>Git</code> is already initialized with an initial commit, so that's good, the next step is to set up Tailwind CSS and clean up the default home page.


Go back to your terminal, and make sure you're inside the project directory (<code>nextjs-learning-platform</code>), then run <code>npm install -D tailwindcss postcss autoprefixer</code> to install tailwindcss dependencies.


Once the previous command is completed, go ahead and run <code>npx tailwindcss init -p</code> to initialize the configuration files for <code>tailwind</code> and <code>postcss</code>.


Now that we have installed and created the config files, we need to update the <code>tailwind.config.js</code> file with the following to tell tailwind what files it should include for its just-in-time compiler.


For a more detailed tutorial check this <a href="https://tailwindcss.com/docs/guides/nextjs">Install Tailwind CSS with Next.js</a> official guide.


Now it's time to include tailwind directives into our code source, to do first I like to use <code>SCSS</code> instead of just <code>CSS</code>.


To use <code>sass</code> first we need to install it as a dev dependency with <code>npm install -D sass</code>, then we'll rename <code>src/app/globals.css</code> to <code>src/app/globals.scss</code>, and finally update its import inside <code>src/app/layout.tsx</code>.


Now open <code>src/app/globals.scss</code> and delete all its content, replacing it with just TailwindCSS directives for now.


I like to always clean up the default content, and make it custom to my project, so in this section, we will change the head meta content, README.md, and add a simple <code>h1</code> title on the home page.


Open <code>src/app/head.tsx</code> and change the <code>&lt;title&gt;</code> content to something like <strong>Next.js Learning Platform - For those who want to learn new skills</strong> and change the meta description to something similar.


Now, let's clean our homepage, and remove the CSS module file <code>src/app/page.module.css</code>


One last touch I like is to create one config for <code>Prettier</code>, and another for <code>vscode</code> settings:


Feel free to ignore this one if you're not using <code>vscode</code>.


If you're curious please feel free to look up any one of them to see what they're doing but most of them are self-explanatory.


Before saving our change to Git, let's first run our app, and verify that we didn’t make any mistake by running <code>npm run dev</code> and opening <a href="http://localhost:3000/">http://localhost:3000/</a> in our browser.


Now, let's commit our changes to Git and move to the next guide: <code>git add .</code> to stage changed files. Then <code>git commit -m "set up tailwindcss with sass, and clean up default content"</code> to commit the changes.


Next, we'll work on <a href="https://codersteps.com/guides/setting-up-prisma-using-postgresql-provider-with-next-js">Setting up Prisma using PostgreSQL provider with Next.js</a>


Setting up a new Next.js project with Tailwind CSS

**Note**: In this guide, I will assume you've already read the previous one  [Setting up a new Next.js project with Tailwind CSS](https://codersteps.com/guides/setting-up-a-new-next-js-project-with-tailwind-css).

After we've created our project, and configured tailwindcss, Now it's time to install and configure Prisma with the seeds data script.

By now you should know that Prisma works really great with Next.js and TypeScript, by giving us an easy and reliable way to design our database schema based on models.

Prisma models are then used to create tables on the database, generate a typed ORM experience, as well as making types available to use per Prisma model.

Generally, I feel more comfortable working with relational databases than with NoSQL databases I think it may be because my first introduction to databases was with SQL Server.

When talking about relational databases two main database servers comes to mind MySQL (or MariaDB) and PostgreSQL.

I used MySQL in my previous projects with Laravel and still use it in work, But Postgres just feel good, it's open-source, and have a solid community, and supports all the features I need. 

When using Prisma, interacting with your database will be the same if you change for example from Postgres to MySQL we only need to reconfigure Prisma's data-source provider.

**Note**: Just be aware that some features may be supported by one database server, and not by another.

`Prisma CLI` is a dev dependency that helps us while developing our application, for example, it allows us to push changes from `schema.prisma` to the database schema, and so on.

Let's install it using npm, open your terminal, navigate to the project root, and run `npm install -D prisma`.

After it's installed we can now initialize our schema file using `npx prisma init --datasource-provider postgresql`.

Prisma uses `postgresql` as its default data source provider, But we've specified it anyway to make sure we use postgresql.

After we run the Prisma init command, it created a `.env` file with the `DATABASE_URL` variable, which is referenced inside `prisma/schema.prisma`.

In order for our Prisma Client to connect with our database, we need to create it first, I will assume that you already have Postgres installed on your system.

To create a new database run `createdb --username=postgres nextjs-learning-platform`, if you got an error, try with your `username` instead of `postgres`.

Let's change `DATABASE_URL` inside `.env` by changing the username, password, and database.

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/nextjs-learning-platform?schema=public"

For me, both username, and password are `postgres` which is the default, then the database name which is the one we use before with the `createdb` command.

While Prisma CLI is used on development, Prisma Client is used on runtime. Prisma Client is what allows us to interact with our database server.

In order for us to generate Prisma Client we need first to have at least one model, for now, let's put the following model which is provided by Prisma CLI when it doesn't find any model.

Go ahead and open `prisma/schema.prisma` then put the following at the end of the file.

**Tip**: If you're using `vscode` make sure to install `Prisma.prisma` extension if it's not already installed.

...

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

Prisma has good [documentation](https://www.prisma.io/docs/concepts/components/prisma-schema) that you can check out and learn more about Prisma Client and Prisma Schema.

Now, we can run `npx prisma generate` at the first run it will install `@prisma/client` then it will generate the Prisma Client.

Finally, let's run `npx prisma db push` to update our Database schema to match what we have in the Prisma schema.

Database seeding is a good way to pre-populate our database with some initial data. it's specialty helpful when deploying our project to production or setting it up in a different environment.

For example, imagine we want to have some predefined categories, an admin account, and maybe some default settings, having database seeding in place is what we need.

Prisma provides a `db seed` command to seed our database, we just need to set it up! which is what we will do in this section.

The `npx prisma db seed` will run the command found inside `package.json` under the field `prisma.seed` which we need to add.

Without further ado, go ahead and open `package.json` then insert the `prisma` properly mentioned below.

{
	// ...
	"prisma": {
		"seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
	},
	"scripts": {
		// ...
	},
	// ...
}

As explained in the [prisma seeding documentation](https://www.prisma.io/docs/guides/database/seed-database) we're using `ts-node` to execute our seeding file which will create next.

In order to avoid errors like <span>SyntaxError: Cannot use import statement outside a module</span> we're setting the `--compiler-options` to use the `CommonJS` module.

Cause we're using `ts-node` we need to install it, go ahead and run `npm install -D ts-node`.

Now it's time to create a new file at `prisma/seed.ts` as we specified inside the `package.json` file, with the following setup as mentioned in prisma docs.

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
	const admin = await prisma.user.upsert({
		where: { email: 'admin@codersteps.com' },
		update: {},
		create: {
			email: 'admin@codersteps.com',
			name: 'Admin',
		},
	})

	console.log('Admin name:', admin.name)
}

main()
	.then(async () => {
		await prisma.$disconnect()
	})
	.catch(async (e) => {
		console.error(e)
		await prisma.$disconnect()
		process.exit(1)
	})

First, we create an instance of Prisma Client, then use it to update or insert an admin user to test that our database seeding is working as expected.

The `main` function is just a simple `async` function for us to be able to use `await`, and also we use it to close our database connections in case of any unexpected exception inside the `main` function.

Finally, let's run `npx prisma db seed` to see if everything is working as expected, if you can see "Admin name: Admin" in the console that means that all is good.

We can also use Prisma Studio to manage our data by running `npx prisma studio` which will open a nice interface with our database model and their data.

Before saving changes to Git, I always like to have a copy of the `.env` file as `.env.example` to keep track of the project environment variables.

**Note**: Please make sure to not include any sensitive values like production passwords, secrets, or API keys.

Now, let's commit our changes to Git and move to the next guide: `git add .` to stage changed files. Then `git commit -m "set up prisma with database seeding"` to commit the changes.

Next, we'll work on [Adding JWT Authentication to our Next.js app using NextAuth.js](#)

In this guide, we will set up Prisma using PostgreSQL provider for our Next.js learning platform project, to easily design and interact with our database.

<strong>Note</strong>: In this guide, I will assume you've already read the previous one  <a href="https://codersteps.com/guides/setting-up-a-new-next-js-project-with-tailwind-css">Setting up a new Next.js project with Tailwind CSS</a>.


After we've created our project, and configured tailwindcss, Now it's time to install and configure Prisma with the seeds data script.


By now you should know that Prisma works really great with Next.js and TypeScript, by giving us an easy and reliable way to design our database schema based on models.


Prisma models are then used to create tables on the database, generate a typed ORM experience, as well as making types available to use per Prisma model.


Generally, I feel more comfortable working with relational databases than with NoSQL databases I think it may be because my first introduction to databases was with SQL Server.


When talking about relational databases two main database servers comes to mind MySQL (or MariaDB) and PostgreSQL.


I used MySQL in my previous projects with Laravel and still use it in work, But Postgres just feel good, it's open-source, and have a solid community, and supports all the features I need.


When using Prisma, interacting with your database will be the same if you change for example from Postgres to MySQL we only need to reconfigure Prisma's data-source provider.


<strong>Note</strong>: Just be aware that some features may be supported by one database server, and not by another.


<code>Prisma CLI</code> is a dev dependency that helps us while developing our application, for example, it allows us to push changes from <code>schema.prisma</code> to the database schema, and so on.


Let's install it using npm, open your terminal, navigate to the project root, and run <code>npm install -D prisma</code>.


After it's installed we can now initialize our schema file using <code>npx prisma init --datasource-provider postgresql</code>.


Prisma uses <code>postgresql</code> as its default data source provider, But we've specified it anyway to make sure we use postgresql.


After we run the Prisma init command, it created a <code>.env</code> file with the <code>DATABASE_URL</code> variable, which is referenced inside <code>prisma/schema.prisma</code>.


In order for our Prisma Client to connect with our database, we need to create it first, I will assume that you already have Postgres installed on your system.


To create a new database run <code>createdb --username=postgres nextjs-learning-platform</code>, if you got an error, try with your <code>username</code> instead of <code>postgres</code>.


Let's change <code>DATABASE_URL</code> inside <code>.env</code> by changing the username, password, and database.


For me, both username, and password are <code>postgres</code> which is the default, then the database name which is the one we use before with the <code>createdb</code> command.


While Prisma CLI is used on development, Prisma Client is used on runtime. Prisma Client is what allows us to interact with our database server.


In order for us to generate Prisma Client we need first to have at least one model, for now, let's put the following model which is provided by Prisma CLI when it doesn't find any model.


Go ahead and open <code>prisma/schema.prisma</code> then put the following at the end of the file.


<strong>Tip</strong>: If you're using <code>vscode</code> make sure to install <code>Prisma.prisma</code> extension if it's not already installed.


Prisma has good <a href="https://www.prisma.io/docs/concepts/components/prisma-schema">documentation</a> that you can check out and learn more about Prisma Client and Prisma Schema.


Now, we can run <code>npx prisma generate</code> at the first run it will install <code>@prisma/client</code> then it will generate the Prisma Client.


Finally, let's run <code>npx prisma db push</code> to update our Database schema to match what we have in the Prisma schema.


Database seeding is a good way to pre-populate our database with some initial data. it's specialty helpful when deploying our project to production or setting it up in a different environment.


For example, imagine we want to have some predefined categories, an admin account, and maybe some default settings, having database seeding in place is what we need.


Prisma provides a <code>db seed</code> command to seed our database, we just need to set it up! which is what we will do in this section.


The <code>npx prisma db seed</code> will run the command found inside <code>package.json</code> under the field <code>prisma.seed</code> which we need to add.


Without further ado, go ahead and open <code>package.json</code> then insert the <code>prisma</code> properly mentioned below.


As explained in the <a href="https://www.prisma.io/docs/guides/database/seed-database">prisma seeding documentation</a> we're using <code>ts-node</code> to execute our seeding file which will create next.


In order to avoid errors like <span>SyntaxError: Cannot use import statement outside a module</span> we're setting the <code>--compiler-options</code> to use the <code>CommonJS</code> module.


Cause we're using <code>ts-node</code> we need to install it, go ahead and run <code>npm install -D ts-node</code>.


Now it's time to create a new file at <code>prisma/seed.ts</code> as we specified inside the <code>package.json</code> file, with the following setup as mentioned in prisma docs.


First, we create an instance of Prisma Client, then use it to update or insert an admin user to test that our database seeding is working as expected.


The <code>main</code> function is just a simple <code>async</code> function for us to be able to use <code>await</code>, and also we use it to close our database connections in case of any unexpected exception inside the <code>main</code> function.


Finally, let's run <code>npx prisma db seed</code> to see if everything is working as expected, if you can see "Admin name: Admin" in the console that means that all is good.


We can also use Prisma Studio to manage our data by running <code>npx prisma studio</code> which will open a nice interface with our database model and their data.


Before saving changes to Git, I always like to have a copy of the <code>.env</code> file as <code>.env.example</code> to keep track of the project environment variables.


<strong>Note</strong>: Please make sure to not include any sensitive values like production passwords, secrets, or API keys.


Now, let's commit our changes to Git and move to the next guide: <code>git add .</code> to stage changed files. Then <code>git commit -m "set up prisma with database seeding"</code> to commit the changes.


Next, we'll work on <a href="#">Adding JWT Authentication to our Next.js app using NextAuth.js</a>


Codersteps

Build a production-ready learning platform with Next.js

Series Guides

Setting up a new Next.js project with Tailwind CSS

Setting up Prisma using PostgreSQL provider with Next.js