In this post we will learn to create a simple blog app using the latest NextJS 14. This blog have been inspired by this YouTube video.

The first thing we need to do is install latest NextJS on our system.

So, open the terminal and run the command. Here, select the options a shown.

To run the NextJS project run the command npm run dev from terminal.

In NextJS the starting point is page.jsx file. So, we are adding a simple Home component to it.

After this create an about folder and the page.jsx file in it.

Create a blog and contact folder and inside them page.jsx file. We created simple components in them.

Now, to create pages for different blogs, we will create a [slug] folder. And inside it page.jsx file.

Now, go to http://localhost:3000/blog/title-2 and we will see a single post page.

Now, we will have an (auth) folder and inside it forgot-password, login and register folder. Create a page.jsx inside login folder.

Now, create a components folder in src folder and inside it navbar folder. Also, create a lib folder inside the src folder.

Inside components create a footer folder and inside it Footer.jsx file.

Now, inside the layout.jsx file add the Navbar and Footer components. These will be shown in all pages.

Now, http://localhost:3000/ will show the Navbar, Home Page and Footer.

Now, in navbar create a links folder and inside it Links.jsx file. Inside it we have a simple code to map through a links array of object. And then pass it to NextJS Link.

In the Navbar.jsx file we will add the Links component.

No, in http://localhost:3000/ we will see the links.

Now, create a loading.jsx file and a Loading component in it.

Also, create an error.jsx in the app folder and add the simple content in it.

Now, when we go to http://localhost:3000/ we ill get the error.

So, back in error.jsx file we will put the use client.