| TypeError: router.push is not a function in Next.js: Causes and How to Fix

TypeError: router.push is not a function in Next.js: Causes and How to Fix

February 10, 2025

Discover the causes of the "TypeError: router.push is not a function" in Next.js and learn step-by-step solutions to effectively fix this common issue.

What is TypeError: router.push is not a function in Next.js

The TypeError in Next.js

A TypeError in JavaScript occurs when an operation cannot be performed, typically (but not exclusively) when a value is not of the expected type. The error message TypeError: router.push is not a function indicates that the variable router exists, but it doesn't have a method named push. This error is commonly encountered in Next.js when developers attempt to use router.push for navigation but the router is either not properly defined or imported, or the context in which router.push is being called does not support it.

Asynchronous Navigation

In some contexts, developers may be trying to use `router.push()` without verifying that `router` is correctly initialized as either `useRouter` from `next/router` or through `withRouter` higher-order component.

When using `router.push`, it is important to remember that it often returns a `Promise`, especially when used in an asynchronous function context. However, ignoring this aspect and attempting to chain methods directly on `router` can lead to confusion.

Standard Usage Context

In Next.js, proper use of the router typically involves importing and utilizing the useRouter hook:

import { useRouter } from 'next/router';

const ExampleComponent = () => {
  const router = useRouter();

  const handleNavigation = () => {
    router.push('/new-page');
  }

  return (
    <button onClick={handleNavigation}>
      Go to New Page
    </button>
  );
}

Component or Context Limitations

When rendering components that do not have direct access to React hooks (like class components or third-party packaged components), ensure that the `router` reference is appropriately passed down or controlled.

When using `withRouter`, an HOC approach can provide the necessary `router` functionality, but always verify that the `router` prop is correctly named and accessible within the component methods.

Debugging Steps

Log the `router` variable to the console to verify it is an instance of Next.js's `router`. This ensures the correct hook or HOC configuration is being utilized.

Check the environment and conditions to ensure they align with React lifecycle requirements for accessing hooks, as improper usage can lead to unexpected behaviors.

What Causes TypeError: router.push is not a function in Next.js

Possible Causes of TypeError: router.push is not a function in Next.js

**Incorrect Import:** One of the most common causes is not importing the `useRouter` hook from the correct Next.js package. Developers might mistakenly import from a different library or a wrong version, leading to the `router` object not having the `push` method. Here's the correct way:
```javascript
import { useRouter } from 'next/router';
```

**Improper Usage in Class Components:** `useRouter` is a React hook designed for function components, not class components. Attempting to use it within a class component can lead to errors because hooks cannot be called within classes, and thus accessing `router.push` becomes impossible. An example of incorrect usage is:
```javascript
class MyComponent extends React.Component {
componentDidMount() {
const router = useRouter(); // This is incorrect
router.push('/path');
}
}
```

**Misspelled or Incorrect Method Name:** Sometimes, developers may accidentally misspell `push` or mistakenly use a similar or incorrect property name that doesn’t exist on the `router` object, leading to such a type error.

**Variable Naming Conflicts:** If there’s a variable in the same scope named `router`, it could potentially override the expected `router` import from Next.js. This shadowing can cause the `push` method to be undefined since the wrong `router` is being referenced.

**Execution in the Wrong Context:** If `router.push` is being called in a context where `useRouter` has not been initialized or is not available (for instance, in server-side code without proper setup), this could lead to the `TypeError`. Next.js is designed for projects that execute React code on both the client and server sides, but `useRouter` is client-side specific.

**Module Resolution Issues:** Problems with how modules are resolved might lead to incorrect or failed imports, causing the `router` object to not be populated as expected. This happens if the local setup or environment is improperly configured, leading the application to not find or improperly compile the `useRouter` hook.

How to Fix TypeError: router.push is not a function in Next.js

Verify the Import Statement

Ensure you are using the correct import statement for Next.js's `useRouter` hook.

The import should look like this:

import { useRouter } from 'next/router';

Check if useRouter is Called Inside a Component

Ensure that `useRouter` is used within a React component. Hooks must be called at the top level of a functional component, not inside loops, conditions, or nested functions.

export default function MyComponent() {
  const router = useRouter();

  function navigateToPage() {
    router.push('/destination');
  }

  return <button onClick={navigateToPage}>Go to Destination</button>;
}

Confirm the Context of router

Check that `router` is correctly initialized by calling `useRouter()` within your component, which should return an object with the `push` function.

If you are seeing `router.push is not a function`, verify that `router` is not reassigned or mutated in your code, which could overwrite it with an incompatible value.

Ensure Using Next.js Functional Components

Ensure your component is a functional component as hooks are meant for functional components only in React, and `useRouter` is a React hook.

const HeaderComponent = () => {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/home')}>
      Home
    </button>
  );
};

Upgrade Next.js

Having an outdated version of Next.js might cause certain functionalities to not work as expected. Upgrade Next.js to the latest version by running:

npm update next

Check Custom Router Configuration

If you are using a custom router, ensure that your custom configuration doesn't interfere with the standard `useRouter` behavior.

Review and test configurations in `next.config.js` to eliminate conflicts that may affect routing.

Inspect Compilation and Build Errors

Sometimes, build or compilation issues might cause unexpected behavior. Run the following command to identify any underlying problems:

next build

Refactor Problematic Code

In some cases, the problem may stem from incorrect logic usage or a complex state management issue in your components. Consider reviewing and refactoring potentially problematic sections to ensure routers are used correctly.

Consult Next.js Documentation and Community

Review the official Next.js documentation for the latest information on routing and examples.

Seek assistance from the Next.js community on forums like StackOverflow or the Next.js GitHub repository for complex or unique issues.