Building Dynamic Web Applications with Next.js/

...

/

Exercise: Dynamic Blog Display with Next.js

Exercise: Dynamic Blog Display with Next.js

Use what you've learned in this chapter to complete this coding exercise.

We'll cover the following...

Problem statement

Let’s assume that we want to develop a blog application. One of the key features is the ability to display all available blogs to users. To showcase the blog posts, you’ll utilize an API to retrieve them. Your task involves fetching the blog posts from the API and displaying them. The API can be accessed on the following link:

Press + to interact
{{EDUCATIVE_LIVE_VM_URL}}:3000/api/posts

Here’s the subset of the data returned by the API for your reference:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }
]
Post fields

Each object ...