Login
Guides & Tutorials

Import Error: 'Link' should be imported from 'next/link' instead of 'next/Link'

When working with JavaScript and frameworks like Next.js, you might come across an error message that says "'Link' should be imported from 'next/link' instead of 'next/Link'". This error typically occurs when you are trying to import the Link component from Next.js using the incorrect casing. In this article, we will explore the causes of this error and provide possible solutions to help you resolve it.

Last updated on October 3, 2023 at 3:33 PM

Author's avatar

Krste Rajchevski

Software Engineer @ Bugpilot

Annoyed by React errors?
Bugpilot is the error monitoring platform for React. Catch unexpected errors, troubleshoot, and fix with our AI assistant. Learn more and create an account to start your 14-day free trial.

Understanding the Error

The error message "'Link' should be imported from 'next/link' instead of 'next/Link'" is raised when the JavaScript module loader cannot find the correct module path. In the case of Next.js, the correct path for importing the Link component is 'next/link', with lowercase "l" in "link". However, if you mistakenly use 'next/Link' with an uppercase "L" instead, you will encounter this error.

Possible Causes

There are a few potential causes for this error:

1. Case-sensitivity

JavaScript is case-sensitive, and it is important to remember that module paths and component names must match exactly. If you use the wrong casing, the module loader will fail to locate the component and raise an error. In the case of Next.js, importing the Link component with 'next/Link' instead of 'next/link' will trigger this error.

2. Outdated or incorrect import statements

Another possible cause of this error is outdated or incorrect import statements. If you are using an older version of Next.js or copying code from an outdated tutorial or documentation, the import statement might be incorrect. Next.js has evolved over time, and it is important to ensure that you are importing components using the correct syntax.

Resolving the Error

Now that we understand the possible causes of this error, let's explore some solutions to resolve it:

1. Fix the import statement

The most straightforward solution is to fix the import statement by changing the casing to match the correct module path. Instead of importing 'next/Link', import 'next/link' (with lowercase "l") to import the Link component from Next.js. Here's an example of the correct import statement:

import Link from 'next/link';

By making this small adjustment, you will be able to import and use the Link component without the error message.

2. Update Next.js version and documentation

If you encounter this error while following an outdated tutorial or documentation, consider updating your Next.js version. Newer versions of Next.js might have changed the casing of certain imports, so it is important to follow the latest documentation to ensure you are using the correct import statements.
Additionally, it is always a good practice to refer to the official Next.js documentation when working with the framework. The documentation is regularly updated and provides accurate and up-to-date information on how to import components and use various features of Next.js.

Conclusion

The error "'Link' should be imported from 'next/link' instead of 'next/Link'" occurs when the Link component is imported using the incorrect casing. By understanding the causes of this error and following the provided solutions, you will be able to resolve it and successfully import and use the Link component from Next.js.
Remember to pay attention to case-sensitivity in JavaScript, update your import statements to use the correct casing, and refer to the latest Next.js documentation to ensure you are using the correct syntax. Happy coding!
[end of blog post]

Annoyed by React errors?
Bugpilot is the error monitoring platform for React. Catch unexpected errors, troubleshoot, and fix with our AI assistant. Learn more and create an account to start your 14-day free trial.

Get Bugpilot