Build news web application using NextJS + REST. It should have page for Top headlines, Sources for top headlines, and search page.
- We want to show list of top headline news for India.
- On cards, We should show news title and image and publish date.
- On click of any card it should open it on single news page & show all details from API response. ( ie
/news/:source/:newsTitle
or/news/:title
)
- We want to have list page for showing news sources with their details and link to their website.
- We should have page for searching news article.
- On search we will see list of news articles according to query.
- When we open news, it should open show all details from API response on new page.
- We will have separate page to show details about any single news article.
- This page will query news article using news source and news title.
- We will consume same API we are using for search.
- Understand and use following NextJS features: SSR, Page Routing, Image Component, Link component.
- Understand NextJS data fetching methods and how they work (eg.
getStaticProps
,getStaticPaths
)
- Pages should be Server Side Rendered.
- Use NextJS provided components ( i.e. Link, Image ).
- Each page should have link to other pages.
- Top Headlines : This will give you list of makes ( Car Manufacturers ) Endpoint : getAllMakes
- Hooks : YT Video
- Git Commits : Medium Article
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
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!
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.