Exercises

Both of the exercises on this page use the same project:

Screensaver

Remember in the 90s, it was common for TVs to have "bouncy logo" screensavers?

In this exercise, we're going to revive it!

Inside /src/app/exercises/01-screensaver, you'll find a <ScreenSaver> component. The bouncing-around logic has already been implemented. Your mission is to allow the user to change the color using routing:

Acceptance Criteria:

When the user visits a route like /exercises/01-screensaver/hotpink, a <ScreenSaver> component should be rendered using the color specified (hotpink).
The /exercises/01-screensaver route should be updated so that it includes a list of links, so that users can choose a color. Feel free to pick your favourite named HTML colors (opens in new tab)!
All 147 named colors should be supported (not only the 3-4 colors that are explicitly linked to).

Solution:

Next 15 update (warning)

The solution video above was filmed using an earlier version of Next. With Next 15, params need to be await-ed:

async function ScreenSaverExercise({ params }) {
  const { color } = await params;

  return (
    <main className="screen-saver-wrapper">
      <ScreenSaver color={color} />
    </main>
  );
}

This fix has been added to the solution on Github (opens in new tab).

Flash messages

Earlier, we saw how to programmatically redirect the user on form submission:

There's an important UX feature missing from this, however: there's no confirmation message! We aren't confirming for the user that their message was received.

A common pattern in full-stack applications is to use flash messages. A flash message is a notification that shows up on navigation, usually to provide additional context about the route change that just happened.

For example, we can use a flash message here to confirm that the message was sent:

In this exercise, you'll use the Toast component we built in the second project. By strategically creating a new toast as the user is redirected, it effectively becomes a flash message!

The relevant pages are /exercises/02-flash-messages and /exercises/02-flash-messages/contact.

Acceptance Criteria:

Submitting the contact form should redirect the user to the exercise homepage (/exercises/02-flash-messages).
Upon redirection, a confirmation message should be shown, using the Toast component. You should also make use of the ToastShelf and ToastProvider components from the previous project.
You don't have to use localStorage or cookies or anything like that. React context alone should be sufficient.

Solution:

Server Actions and Route Handlers (info)

In this exercise, we didn't solve the core problem of actually sending the user's message to our back-end.

There are a couple of ways we could do this in Next. They're both beyond the scope of the course, but I wanted to mention them in case you wanted to do your own research.

The first would be to set up an API endpoint using Next, and to send the data to that endpoint using the Fetch API. You can use Route Handlers (opens in new tab) to set up those API endpoints.

Another option is to use the brand-new Server Actions (opens in new tab) feature. It's very early days; as I write this, the feature is still in Alpha. I haven't actually used it myself yet. But I suspect once this becomes a stable part of Next, it'll be a delightful way to solve this problem!