Next.js Practice

This problem covers the parts of a site that stay the same on every page, like the header and footer. It also looks at giving each page its own browser tab title instead of one shared across the whole site.

Here you handle a site with two very different sides — a public area and a members' area — that need to look nothing alike. The catch is that neither the addresses people share nor the pages themselves can change to make it work.

Build a clinic portal that shows a loading skeleton while a page is fetching, a friendly error screen with a working retry when something breaks, and its own not-found page for missing appointments. A practical task to show you can handle the states a page hits when things are slow or go wrong, without exposing internal details.

This one is about moving between pages without the whole site reloading each time. It also covers highlighting whichever collection the visitor is currently looking at.

Here the problem is filters that vanish the moment someone refreshes the page. The fix keeps the chosen filters in the address bar, so the exact view can be bookmarked or sent to someone else.

This problem deals with sites where every new item means someone has to create another page by hand. One page template serves them all, and anything that doesn't exist gets a proper not-found message.