Resolving WebStorm Warning for route Naming Convention in Next.js Project

I'm currently working on a Next.js project (version 14) that utilizes a specific file naming convention within the pages directory, where we are required to name files as page.tsx inside their respective feature directories (e.g., forgot-password/page.tsx). This setup runs without issues, and the application behaves as expected when served. However, I've encountered a challenge within WebStorm that I hope to get some insight on.

Issue Description:

WebStorm is displaying a warning that it "Cannot resolve file 'forgot-password'" when using the <Link> component from next/link to navigate to the route associated with the forgot-password directory:

<Link href="/forgot-password" className="text-blue-500 text-sm font-semibold leading-5 not-italic w-full text-right">
  Forgot password?
</Link>

Despite the application running correctly and the route functioning as intended, this warning persists in the WebStorm IDE, suggesting a path resolution issue within the editor.

Is there a way to configure WebStorm to recognize this custom file naming convention for the purpose of path resolution, specifically for Next.js projects?

 

0
1 comment

Thank you for reaching out to us!

Special support for resolving such paths is requested in https://youtrack.jetbrains.com/issue/WEB-61030/Next.js-13-Support-page-navigation-using-App-Router and https://youtrack.jetbrains.com/issue/WEB-60601/Support-Next.js-13-App-directory-for-href-links, please follow these tickets for updates.
For now, I'd recommend marking the (auth) folder as a Resource root (Mark directory as/Resource root).

0

Please sign in to leave a comment.