Since the nextjs link component does client side navigation, it supports the common pattern of an in-place navigation by overwriting the current entry in the browser history.

Link `replace`

By default (replace={false}) the NextJS Link component does client side navigation using history.push. This means an entry is left for the current page and the user can come back using the browser back button.

Sometimes this isn't ideal. e.g. multiple page workflows, error pages etc. In these case you might want to replace the current page with the new one. This is supported using the replace={true} prop in NextJS.

The below example error page, demonstrates history replacement.

app/error/page.tsx

app/page.tsx

"use client";

import Link from "next/link";
import { useEffect } from "react";

export default function Page() {
  useEffect(() => {
    sendToErrorMonitoring();
  }, []);
  return (
    <div>
      Oh no! Something went wrong 😱
      <Link href="/" replace>Go back to the homepage</Link>
    </div>
  );
}

function sendToErrorMonitoring() {
  /** Example */
  console.log("Error Logged for Monitoring 🚨");
}

Transcript

00:00

Since the next year's Link component does client side navigation, it supports the common pattern of an inplace navigation by overwriting the current entry in the browser history. Let's motivate this with a practical example. It is common for error pages to log some information to an error monitoring service, and within this simple app, we can see a demonstration of that within the console. Also, it is nice to give the user an opportunity to go back to a Happy Path workflow. In this example app, we are taking the user back to the homepage using the next link component. However, there is a concern with this navigation.

00:34

The user can actually click back to go back to the error page and cause another error, and we end up with a duplicate false error within our monitoring service. So it would be nice if you could navigate the user away from the error route, but don't leave a browser history for the error page, and this is quite easy to achieve. With the next year's link component, we simply add the replace prop providing the value true. If you've already gone through a React course, you would know that there is actually a shorthand for a prop that you want to assign to Drew. You simply provide the prop name, don't provide any value,

01:07

and it is automatically implied that prop equals true. Now, if you execute this code, go intentionally to the error page, you can see the error log on the console. If you choose to navigate to the homepage, the current history item will be replaced and we can actually verify that by looking at the history within the browser. There is no entry for the error page. There is only the fact that we started with the new tab, which is currently on the homepage.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional NextJS Lessons

Replace Navigation History

Subscription Required

Link `replace`

Transcript

Professional NextJS

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional NextJS Lessons

Replace Navigation History

Subscription Required

Link replace

Transcript

Professional NextJS

Link `replace`