Invariant: attempted to hard navigate to the same URL (Rewrites inside next.config.mjs)

Explanation of the problem

The issue arises when using the latest Next.js canary release and attempting to create rewrites in the next.config.mjs file. Specifically, if the rewrites include a trailing slash in the source path and/or rewrite from a source to a destination with a slug, it leads to errors in production that trigger page reloads and throw errors. The following errors have been observed: “Failed to lookup route: /”, “The provided ‘as’ value (/test/) is incompatible with the ‘href’ value (/test/[slug])”, and “Invariant: attempted to hard navigate to the same URL /”. Even with path rewriting to a dynamic destination, the errors persist unless a root index file is present in the folder with the dynamic route. Removing the trailing slash from the source resolves the errors for the second group of links, but this workaround is not viable for the home page (“/”).

To reproduce the issue, a minimal reproduction repository has been provided (GitHub Link). The rewrites can be defined in the next.config.mjs file, where the source path does not contain the slug (with a trailing slash) and the destination path includes the slug. Alternatively, a source/destination mapping for the home page can be used. The expected behavior is for the rewrites to function without throwing errors on page load, similar to version 12.1.4 of Next.js.

It is important to note that this bug appears to be related to another issue reported on GitHub (Issue Link). The commonality lies in the usage of rewrites and the observation of an additional page.js fetch during development, leading to a “Failed to load script: /_next/static/chunks/pages/test.js” error. The exact cause of this bug and its impact on production and development environments requires further investigation and resolution to ensure consistent behavior across versions.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Invariant: attempted to hard navigate to the same URL (Rewrites inside next.config.mjs)

To address the issue described, several steps can be taken to investigate and potentially resolve the problem with rewrites in Next.js. Here is a proposed solution:

1. Analyze the Code and Configuration: Start by reviewing the next.config.mjs file and the rewrite configurations. Ensure that the source and destination paths are correctly defined and that there are no conflicting or incorrect mappings. Pay particular attention to the usage of trailing slashes and slugs in the paths.
2. Test Different Rewrite Configurations: Experiment with different rewrite configurations to identify patterns or specific scenarios that trigger the errors. Test variations in source and destination paths, including different combinations of trailing slashes and slugs. By iterating through different configurations, you may uncover the specific conditions that cause the issue and find a workaround.
3. Check Next.js and Related Libraries: Keep an eye on the Next.js GitHub repository and related issue discussions for any updates or fixes related to rewrites. It’s possible that the problem has already been identified and a solution or workaround has been provided. Additionally, ensure that you are using the latest version of Next.js and any relevant dependencies to take advantage of bug fixes and improvements.
4. Seek Community Support: Reach out to the Next.js community through forums, discussion boards, or relevant social media channels to seek assistance. Describe the issue in detail, including the specific error messages, reproduction steps, and relevant code snippets. Other developers who have encountered similar problems may be able to provide insights, suggestions, or workarounds based on their experiences.
5. Submit a Bug Report: If the issue persists and no suitable solution is found, consider submitting a bug report to the Next.js GitHub repository. Provide a clear and concise description of the problem, including reproduction steps, code samples, and any relevant error messages or logs. This will help the Next.js maintainers and community members understand and address the issue more effectively.

Remember to regularly update your dependencies, including Next.js and related libraries, as new releases often include bug fixes and improvements that may resolve the problem. Additionally, follow any updates or announcements from the Next.js team regarding the reported issue to stay informed about potential solutions or workarounds.

// pages/index.js
import { getStaticProps } from 'next';

export function HomePage({ data }) {
  // Render the page using the fetched data
}

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  // Process data and return it as props
  return {
    props: {
      data,
    },
    revalidate: 60, // Re-generate the page every 60 seconds
  };
}

// pages/dashboard.js
import { getSession } from 'next-auth/client';

export function DashboardPage({ user }) {
  // Render the dashboard page for authenticated users
}

export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    // Redirect unauthenticated users
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  // Retrieve user data and pass it as props
  return {
    props: {
      user: session.user,
    },
  };
}

// components/Button.js
import styles from './Button.module.css';

export function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}

// Button.module.css
.button {
  /* Styles specific to the Button component */
}

// pages/index.js
import React from 'react';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>Data: {data}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return {
    props: {
      data,
    },
  };
}

export default HomePage;

// pages/blog/[slug].js
import React from 'react';

const BlogPost = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // Fetch list of blog post slugs from an API
  const response = await fetch('https://api.example.com/blog');
  const slugs = await response.json();

  // Generate paths for all blog posts
  const paths = slugs.map((slug) => ({ params: { slug } }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // Fetch blog post data based on the slug
  const response = await fetch(`https://api.example.com/blog/${params.slug}`);
  const post = await response.json();

  return {
    props: {
      post,
    },
  };
}

export default BlogPost;

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, World!' });
}