Build a News Portal Using Next.js

In this article, we will explore how to build a news portal using Next.js, a popular React framework for server-side rendering and static site generation. The news portal will allow users to publish and categorize news articles, providing a seamless user experience with fast page loads and dynamic content.

Output Preview: Let us have a look at how the final output will look like.

Prerequisites

• Next.js
• Tailwind CSS
• NodeJS

Approach to Build a News Portal Using Next.js

• Set up new Next.js Project
• For state management we will utilize the built-in React hooks such as useState and useEffect.
• Create Navbar component for navigation of application.
• Create Home page to display the list of news which has functionality to search and filter the news.
• Create ArticleCard component which displays the indivisual news.
• Create new-article page which will have Form to add a new news article.
• Create a page for dynamic route which will display details about specific news article.
• We will use Tailwind CSS classes for responsive and modern design.
• We will utilize localStorage to save and retrieve news data.

Steps to Create a Recipe Manager Using Next.js

Step 1: Initialized the Nextjs app

npx create-next-app@latest news-portal

Step 2: It will ask you some questions, so choose as the following bolded option.

Project Structure

Updated Dependencies

"dependencies": {
 "react": "^18",
 "react-dom": "^18",
 "next": "14.2.5"
},
"devDependencies": {
 "postcss": "^8",
 "tailwindcss": "^3.4.1"
}

Create the required files and write the following code.

Below mentioned is the CSS code for setting up global styles in the project. This file will include base styles, components, and utilities from Tailwind CSS:

Below mentioned is the JavaScript code for the news portal website. This component will handle the display and filtering of news articles, using React hooks and components:

Below mentioned is the JavaScript code for the Navbar component of the news portal website. This component is responsible for rendering the navigation bar, which includes links to the Home page and the page for creating a new article. It also includes a responsive menu toggle for smaller screens:

Below mentioned is the JavaScript code for the ArticleCard component of the news portal website. This component is responsible for displaying a single article in a card format, including its image, title, author, publication date, and a "Read More" link that redirects to the full article page:

Below is the JavaScript code for the NewArticle component. This code creates a form for adding a new article to the news portal.

This component displays detailed information about a specific article based on its ID from the URL.

Step 3: Start your application using the following command.

npm run dev

Output: