NextJS 14 Blog app
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.
Now, we will also create a not-found.jsx file inside the app folder.
Now, when we go to any non existing page, we will get the Not Found page.
Now, in globals.css file, we will add the below CSS content.
Now, in http://localhost:3000/ we will see all dark background.
We will also add a div with container class in the layout.js file.
Now, create a navbar.module.css file inside the navbar folder and put the below CSS code in it.
Now, in the Navbar.jsx file we will add a Link and use the css file.
Now, create a navLink folder inside the links folder. Here, in the NavLink component, we will use the pathName to navigate to to the item.
Now, we will create a navLink.module.css file inside the navLink folder.
Now, in the Links.jsx file, we will use the temporary session and pass different data to NavLink component.
Back in the the Links.jsx file, we will add an Image and NavLink.
Now, in links.module.css file we will add the CSS.
Also, in the globals.css file we will add the media CSS.
Now, in the public folder we will add the images for our project.
Now, in the home.module.css file we will add the required CSS.
We will add some more styles in the home.module.css file.
Now, in the page.jsx file in app folder, we will add the below code.
Now, in http://localhost:3000/ we see the Homepage.
Now, we will update the footer.module.css file and add the below CSS.
In the Footer.jsx file we will add the below code.
Now, we will see the correct footer.
Now, we will add styles in the about.module.css file.
Now, in the about folder, we will add the page.jsx file. Here, we will have a simple AboutPage.
Our About page is looking correct now.
We will create a contact.module.css file and add the below CSS in it.
Now, in the page.jsx file inside the contact folder, we will add a basic form.
Now, in the components folder, we will add a postCard folder. Inside it we add a postCard.jsx and postCard.module.css file.
We will also add a blog.module.css file inside the blog folder and add the below CSS in it.
Now, in the page.jsx file inside the blog folder, we will call the PostCard components.
Now, in the postCard.jsx file we will add the below content.
Now, in the postCard.module.css file we will add the below CSS.
Now, to show images from a specific file we will add the url for the images in next.config.js file.
Now, in the BlogPage, we will add some styles.
We will add a paragraph with some lorem text in the postCard.jsx file.
Now, in the blog page, we will see the blogs.
Now, to show the Single Post page, we will add the below content in page.jsx file in the [slug] folder.
Now, we will add the below styles in singlePost.module.css file.
Now, we will use the concept of new Server Actions of NextJS 14. Here, we are calling a getData function, which is fetching data from an API endpoint. And then getting the data.
Earlier to do the same, we need to use the useEffect hook and make the NextJS component as client side component(ReactJS type).
Now, in the PostCard component, we will get the post props and will be using it to show the title and body.
Now, http://localhost:3000/blog will show title and body from the API endpoint.
Now, for a SinglePostPage component, we will again be using the Server Actions of NextJS 14.
Now, clicking on any post will take us to the individual post.
Now, we will create a postUser folder inside the components folder. Here, in the postUser.module.css file, we will put the below code.
Now, in the postUser.jsx file, we will again use Server Actions to pass the userId and get the user details.
Now, in the page.jsx file in [slug] folder we will call the PostUser component with passing userId as props. Also, we are using Suspense to show Loading while the component loads.
Now, we will get the correct user in the single post.
Now, we will create a data.js file inside the lib folder. Here, we are putting the users and posts assay. And also the getPosts, getPost and getUser function.
Now, in the BlogPage component, we will call the getPosts function.
Now, in the SinglePostPage component, we will call the getPost function and pass the slug. We will also show the PostUser, if the post is present.
We will store our data in MongoDB. So, we will open cloud mongodb and create a New Project.
We will name the project nextjs-14 and click on Next button.
In the next screen click on the Create Project button.
Next, click on the Create button.
Next, click on M0 then AWS and the Creae button.
Now, give a username and password and click on the Create User button.
Next, click on Finish and Close to use the current IP address.
Now, click on Network Access and then Allow Access From Anywhere.
Next, in Database click on the Connect button.
Now, in the pop-up click on the Drivers.
In the next pop-up copy the whole url.
Now, in the .env file put the MONGO variable containing the URL.
Also, in the .gitignore put the .env file.
Now, from the terminal install mongoose version 8.
Now, create a file utils.js and put the below code in it. It is to connect to the database
Next, we will create models.js file. It will contain the structure of data for user in database.
Now, also create the post models in the models.js file. We are also exporting the User and Post.
Now, in data.js file put the getPosts and getPost function.
Now, we will also add getUser and getUsers in data.js file.
Next, we will open the MongoDB cloud again and click on Browse Collections.
Next, click on Add My Own Data button.
Now, click on Insert Document
Now, for the users we will give the respective fields.
We have manually put three users.
Now, we will create posts also.
Here, also we will put the required fields.
Now, we will add some posts items.
Back in the PostCard component, we will put the single post.
Now, we are getting all the posts from the database.
We will also add createdAt in the posts.
Now, in the SinglePostPage, we will put the post which we got from the database.
In the PostUser we will add a NextJS image and then use the database data.
Now, clicking on a single post will show the detail from database.
We will also use noStore() in data.js file. It helps to not store the cache.
Now, we will add generateMetadata in SinglePostPage. Here we are adding slug and showing title and description.
Now, for each post we will see the title.
Now, we will create an action.js file. Here, we will have a server component. In it we will have addPost and deletePost. These functions will add or delete a post.
Next, we will create serveractiontest folder and inside it page.jsx file. Here, we have a simple form.
Now, when we go to http://localhost:3000/serveractiontest we will see the simple form. Here, we are also submitting the data.
Now, in http://localhost:3000/blog we will get the new data.
Now, from the database get the id for the newly created field.
Now, give the id in http://localhost:3000/serveractiontest and hit the delete button.
Back in http://localhost:3000/blog we will see the post been deleted.
Now, we will show the data through the api folder. So, create an api folder and inside it blog folder. Now, create a route.js file inside it.
Now, in the BlogPage component we will create a getPosts function and call the api/blog route.
Now, again our http://localhost:3000/blog is working fine.
Now, inside blog folder create a [slug] folder. And inside it create route.js file. Here, we have created the GET and DELETE functions.
Now, back in page.jsx inside the [slug] folder, we will add the new getPost which uses the api endpoint.
We have renamed the serveractiontest to create folder. And added create.module.css file with styles in it.
Now, we have updated the page.jsx inside the create folder. We have changed the name of the component, also added styles and action function in it.
Now, in the action.js file we will add the img.
Now, in the Links.jsx file we will add a new title and path.
Now, our form is looking good in http://localhost:3000/create
Now, we will create an user folder inside api folder. And then a route.js file inside it. It will contain our user GET route.
Now, we will update the Create component to show username and id also.
Now, in the http://localhost:3000/create we will add a new item. Note that we are getting user id of all users, which is helpful in creating a post.
Our newly added post is shown in http://localhost:3000/blog
This completes our post. The code for the same can be found here.
