`@next/next/no-html-link-for-pages` rule does not work with `pageExtensions`

[nnmax]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.2
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: 8.3.1
    Relevant Packages:
      next: 13.4.13-canary.9
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

ESLint (eslint-config-next)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/nnmax/next-eslint-config-reproduction-app

To Reproduce

1. git clone https://github.com/nnmax/next-eslint-config-reproduction-app.git
2. cd next-eslint-config-reproduction-app
3. npm install
4. npm run lint
5. Observe the ESLint output from the terminal.

Describe the Bug

The @next/next/no-html-link-for-pages rule doesn't work after configuring custom pageExtensions.

Expected Behavior

It should recognize pageExtensions.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[balazsorban44]

Currently, the ESLint rule is indeed unaware of this configuration.

See https://github.com/vercel/next.js/blob/e757cac3f4c9152209537f8274e29e41a470920b/packages/eslint-plugin-next/src/rules/no-html-link-for-pages.ts#L95

[nnmax]

Can I make a PR to accomplish this? I would be happy to help.

I readed the source code and found only one difficulty, how to get the user configured pageExtensions parameter. I have two ideas for this:

• Get the pageExtensions parameter from the user's next.config.js or next.config.mjs configuration file.
  • Use the loadConfig function to get the configuration. But unfortunately, this function is an async function, and the ESLint create function does not support async calls. So this solution does not work.
  • Read the configuration file via require(). If the user is only using the CommonJS and exporting a configuration object, this is easy enough to get the pageExtensions parameter. But if the user is using an ES Module or exporting a sync or async function, I can't get the pageExtensions parameter. Because the require() function doesn't support dynamic import of an ES Module. So this solution also fails.
• Provide an ESLint option named pageExtensions.
  • This is the only option that works so far.

This is my current idea, feel free to discuss it.

[abhishek1810]

Hello, I am new to open source and want to work on this issue. Do I need to get this assigned first or should I just fork and start working directly?

[jessfeliciano]

@abhishek1810

It looks like this is already being worked on for a duplicate ticket. Here's the PR: https://github.com/vercel/next.js/pull/51783

Maybe reviewing and commenting on that PR first would be helpful.

[DerickT02]

Is this still open? I would be happy to fix this issue if someone can guide me where in the project this error is being produced.

[Santosh130602]

Hello @nnmax @balazsorban44 can i do on this issues becaus I thing I found the solution of this issues so can you please doing work on this issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[md-fahad-ali]

Is this issue is still exists cause I want to work on it

[jackunion]

@balazsorban44 closed in https://github.com/vercel/next.js/pull/68770 , correct?

[nguye3hg]

Hi, I’d like to work on this issue. Please assign it to me.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[nguye3hg]

Hi! I’d like to contribute to this issue and help standardize the terminology across the documentation. I’ve reviewed the context and plan to update all instances of “file-system” to “filesystem” for consistency. Please let me know if there are any exceptions I should be aware of before I get started.

[viniciuspizettadesouza]

Hi @balazsorban44, how are you? It seems that the implementation mentioned by @jessfeliciano and @jackunion started at https://github.com/vercel/next.js/pull/51783 and https://github.com/vercel/next.js/pull/68770 does not have pageExtensions yet.

I propose a solution at https://github.com/vercel/next.js/pull/80035. Can you review it when you have some time?

[Mitch5000]

Hey! I’d love to work on this issue. I’ve been working with custom pageExtensions in Next.js projects, so this bug directly affects some of my setups. I'm interested in digging into the eslint-config-next package to understand how the @next/next/no-html-link-for-pages rule is resolving page files.

I think it's a great opportunity to contribute a fix that improves compatibility for more flexible project structures. I’ll start by reviewing how pageExtensions are parsed and check if they're being passed correctly to the ESLint rule logic. Let me know if there's any guidance before I dive in!

[YeezyWest]

Hi! I’d love to take on this issue.

Plan: I’ll start by reproducing the bug with a custom pageExtensions config. Then I’ll inspect the logic inside the @next/next/no-html-link-for-pages rule to confirm if it’s hardcoded for .js/.jsx/.ts/.tsx. I’ll update it to respect pageExtensions from next.config.js, and add tests to cover this case.

Why me: I’ve worked with ESLint plugin development and Next.js config handling. I'm confident in making this rule more flexible while maintaining stability.

[viniciuspizettadesouza]

Hey folks! Just a heads-up — I already came up with a proposed solution you can try out in my MR #80035. Feel free to take a look, test it out, and let me know if you spot anything that could be improved. Happy to collaborate and iterate on it!

[pouryaPKGit]

Hi 👋 I'd like to work on this issue as my first open-source contribution. Is it okay if I take it?

[alviarm]

Hi all, I'd like to help move this forward.

I'm currently testing @viniciuspizettadesouza's solution in #80035 and can confirm it resolves the basic case for JavaScript configs (next.config.js). I'd be happy to help by:

• Expanding test coverage for different pageExtensions configurations
• Verifying edge cases (like mixed extensions or empty arrays)
• Addressing any feedback from maintainers on the PR

Since this is tagged good first issue, I'd appreciate guidance on:

1. Preferred approach for testing TS configs (next.config.ts)
2. Whether to focus on PR #80035 or tackle remaining gaps separately

Looking forward to contributing!

[Abhyshekbhalaji]

Hi, I’d like to work on this issue as my first contribution. Is anyone assigned yet?

[tysoncung]

I'm interested in working on this issue. Could you provide more context about what you're looking for? Any additional details about requirements or constraints would be helpful.

[benayakichamu]

Yoh suup i wanted to work on this but i saw error came from a user with arm chip i use x86 i don't know how relevant that is for me working on this, but am just gonna wait to see if the error is reproduced in x86 maybe its platform dependent

[reckziegelwilliam]

Hi, I’d like to attempt fixing this one. I’ve read through the description, repro, and contributing guide, and I have a clear idea of how to approach it. If no one else is actively working on it, I can put together a PR with tests/docs updates.