Client-Side Navigation

Client-side Navigation in Next.js

As we have already seen so far, Next.js is not only about rendering React on the server. It provides several ways to optimize our website’s performance, and one of these optimizations is how it handles client-side navigation.

In fact, it supports the HTML standard <a> tags for linking pages, but it also provides a more optimized way for navigating between different routes: the Link component.

We can import it as a standard React component and use it for linking different pages or sections of our website. Let’s look at an easy example.

Click the “Run” button below to execute the code. Once it has finished execution, you can view the output using the link provided.