[Next] Enforce default import for Next.js file conventions

[mwskwong]

There are a few file conventions in Next.js that must contain default export. Currently, using this style guide out of the box will cause an error in those files, because of the import/no-default-export rule. It is suggested to override those specific files to enforce default export. e.g.

// https://github.com/vercel/style-guide/blob/canary/eslint/next.js
module.exports = {
  extends: ["plugin:@next/next/recommended"],
  overrides: [
    {
      files: JAVASCRIPT_FILES,
      parserOptions: { babelOptions },
    },
    // added override
    {
      files: [
        "next.config.mjs",
        "app/**/page.tsx",
        "app/**/layout.tsx",
        "app/**/not-found.tsx",
        "app/**/*error.tsx",
        "app/apple-icon.tsx",
        "app/**/opengraph-image.tsx",
        "app/sitemap.ts",
        "app/robots.ts",
        // ...
      ],
      rules: {
        "import/no-default-export": "off",
        "import/prefer-default-export": ["error", { target: "any" }],
      },
    },
  ],
};

[mrmckeb]

We've had feedback that this is frustrating, and we did open the conversation to support named exports in Next.js, but I think that was hard for them to prioritise. https://github.com/vercel/next.js/issues/35717

I'd be happy for you to create a PR for this if you'd like?

[mwskwong]

@mrmckeb Just wondering what's the direction Vercel is going regarding this? If there isn't a clear plan on changing things to like export const Page = ... yet, I'm happy to create a PR on updating the ESLint config.

[mrmckeb]

There isn't that I'm aware of, sorry. It's something we've discussed before, but I don't think it's on the roadmap.

[mwskwong]

There isn't that I'm aware of, sorry. It's something we've discussed before, but I don't think it's on the roadmap.

Since ESLint v9 is making use of flat config by default, I believe it may be beneficial to focus on that first before applying this change to avoid double effort.