• 100 Days of Code
• Installation
• Live Site
• Resources
• Let's Connect!

Day 27: April 12, 2021

• I started learning Next.js, and this app uses the News API to fetch news articles.

• I'm a proud Dog Dad of two rescue dogs, and I applied a dog theme to the news site.

• Thank you to Zack Wilson / PortEXE for his excellent Next.js + NewsAPI tutorial on YouTube!

1. PREREQUISITE: This app requires an API key from News API.

• Log in or register at News API.
• Once logged in, press the "Get API Key" button.
• The generated API key will be alphanumeric and 32 characters long.
• Keep the browser tab with your News API key open for reference.

2. Git clone and cd into the repo folder:

git clone git@github.com:emjose/news-site.git && cd news-site

3. In the main root directory of the project files, create an .env file:

.env

4. In the .env file, create an environment variable to store the API key. Paste this line:

NEXT_PUBLIC_NEWS_KEY=

5. Paste your News API key after the equal sign character:

NEXT_PUBLIC_NEWS_KEY=your-news-api-key

6. The API key variable is used in the fetch request located in /pages/feed/[slug].js:

const apiResponse = await fetch(`https://newsapi.org/v2/everything?q=dogs&pageSize=9&page=${pageNumber}`, {
	headers: {
		Authorization: `Bearer ${process.env.NEXT_PUBLIC_NEWS_KEY}`,
	},
});

7. Back in the terminal, install dependencies:

npm install

8. Run the development server:

npm run dev

9. Open http://localhost:3000 with your browser to launch the News Site app.

• Dog Day News is a progressive web app.

• Dog Day News is responsive and keyboard-navigable.

• Users can browse the newsfeed and app pages.

• Users can navigate 10 pages of the most recent dog-related news.

• Note: Although the News API fetch request has parameters for the keyword "dogs," some articles unrelated to dogs appear in the newsfeed.

• Unsplash

• News API

• Cloudinary

• My JSON Server

• Next.js on Github

• Learn about Next.js

• An Interactive Next.js Tutorial

• Coding A News App With Next.js by Zack Wilson / PortEXE

• My blog on how I created my Github READMEs