August 11, 2023

A simple website made with NextJS and CSS that shows realtime news

Realtime News

What is it?

Just a simple sample website made with NextJS and CSS that shows realtime news.

Topics covered

  • NextJS basics
  • Routing
  • Creating API
  • Server side fetching from API
  • Array Mapping
  • NextJS SEO (static and dynamic)
  • Modular CSS
  • Dynamic Pathing
  • Git/GitHub (obvious)
  • Environmental Variables
  • Server Deployments

If you are copying this project, please give credits :)

How to Use it ?

All the steps are same as a typical NextJS project but you need to For running Locally

  • Step 1 : Go to and get an API key.
  • Step 2 : create '.env.locale' file in the root directory
  • Step 3 : add NEXT_PUBLIC_NEWS_KEY=YOUR_NEWSAPI_KEY line in .env.local
  • Step 4 : Restart the server so that your environment variables are added to the project

For Deployment on Vercel/Netlify/GitHub Pages etc

  • Step 1 : Go to and get an API key. (no need to create if you already have)
  • Step 2 : While deploying, just add the environment variable and its value and you are good to go.

NextJS setup

This is a [Next.js]( project bootstrapped with [`create-next-app`]( ## Getting Started First, run the development server:

npm run dev
# or
yarn dev
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. [API routes]( can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes]( instead of React pages. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation]( - learn about Next.js features and API. - [Learn Next.js]( - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository]( - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform]( from the creators of Next.js. Check out our [Next.js deployment documentation]( for more details.