All right, so to get started with, I have created an empty folder on my desktop.
I have called this as Code sync.
And then I just open it up in VS code.
This is the name that I came up with.
You can call this anything that you wish.
Once you have done this, we can go ahead and open up our terminal and just try to initialize a Next.js
application.
So I will say Npx create next app.
Normally you would say at latest, but in our case I'll go with a specific version which is going to
be 14.2 .23.
At the moment I'm recording this video.
The latest version is Next.js 15, which has some compatibility issues.
For that reason, I'll go with 14.2 .23, which is an absolutely beautiful, uh, version that we can
use.
And to be able to initialize it under the current folder, which is this code sync, I'll put that at
the end.
Right.
And we would like to go with TypeScript.
No ESLint tailwind CSS source directory app router, which is the recommended one.
And we don't really want to customize the default import alias.
If you don't know what that means, I can explain it later in the video.
So this is going to create all the files and get everything that we would need for the Next.js application.
Then we can run npm run dev.
Let me just clear up the terminal and just say npm run dev to get the Next.js application that we have.
Okay.
So this is what we just got from the Next.js team.
Let's go back to source.
This is the homepage UI.
Clear this up.
So it would be awesome if you had some Next.js knowledge at this point.
But if you don't, I think it is still completely fine to follow along because Next.js is basically
like at the end of the day, you are still writing react code, but there are some different concepts
on top of it with some optimizations.
We can go through it in this video as well.
But as I said, it would be awesome if you had some prior knowledge.
So let's save.
And there is also a complete crash course that you can watch about Next.js.
I'll just link it, uh, in the description.
Okay.
So this is what we got for the home page.
On top of Next.js, we would like to add shared CDN UI, which will give us all the components that
we would need to build an awesome UI.
So for now, let's go under the installation with Next.js.
Copy the script.
I am using npm in this video.
If you are using a different package manager, you can copy it, but I'll go with the npm option since
everyone been using it at least the most of the audience, right?
So I'll go ahead and paste this in.
It will ask us three different questions.
Go with the default ones.
So these are mostly for colors.
Okay.
It will update your tailwind config file to set up the CDN UI.
And then it will update the global CSS file.
And it will create this lib and utils file which has this function that Schwetzingen uses behind the
scenes.
So you don't really need to worry about this at all.
And let's say we want to use a button coming from CDN.
Transition.
So how can we do it?
They have it.
As an example you would say Mpc's latest add button.
Right.
So this part is always the same.
And you would type the commands right.
To be able to initialize it.
You would say init.
To be able to add something you would say add and the component name.
So let's copy this.
Go back to our application.
Paste this in.
And you can actually import multiple components at the same time such as button and cart.
And it can get both of them.
Put it under the components under the UI.
And you would have the entire code.
You can see it, update it, customize it and use it as you wish.
So let's say button.
It should be button like this.
And it should be coming from the components UI button directory.
So let's say sign in.
Okay.
So this is what we got now that we have the shared CDN and Next.js set it up.
Next we can implement the authentication.