Add Nextjs config

[thernstig]

Vite has its own config. Would it make sense to add one for Next.js? The reason being that Next.js requires this setup:

  {
    plugins: {
      'react-refresh': reactRefresh,
    },
    rules: {
      'react-refresh/only-export-components': [
        'error',
        {
          allowConstantExport: true,
          allowExportNames: ['metadata'],
        },
      ],
    },
  },

Next.js latest version has a convention to export these things:

export const metadata = { ... }
export const dynamic = 'force-dynamic'
export const revalidate = 60
export const runtime = 'edge'
export const fetchCache = 'force-no-store'

I believe that this plugin is necessary and good even for modern Next.js 15 app router projects, at least when I read https://nextjs.org/docs/architecture/fast-refresh#limitations:

The file you're editing might have other exports in addition to a React component.

[ArnaudBarre]

I'm not a Next.js user, but because it bundle in dev, it's not always mandatory to follow this rule. But back in the day I was using create-react-app, having it fail "sometimes" is very painful and I prefer to have a bit more files but good HMR.

I'm not 100% sure allowConstantExport would always work with Next, it would be cool if we have an example where exporting an object fail to preserve local state but constant works

[thernstig]

@ArnaudBarre I am not 100% confident myself either. I installed your nice plugin since I thought it could be good, especially after I found that linked note. I currently have the above config set myself and it seems to work, but I also just recently added it so I am unsure.

[ArnaudBarre]

I'll do some testing next week to decide if it should be enabled or not

[ArnaudBarre]

I did some testing (npx create-next-app@latest will all default) and for "normal" components, constant exports will warn with ⚠ Fast Refresh had to perform a full reload when ./app/Counter.tsx changed. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

But when exporting from Layout where all the cache/metadata flag should be used, any export will works because the HMR boundary is directly the page component.

To fully support Next, the best would be to detect if the file is a Layout or a Page, but I don't think it's good for these files to have exports used by other components, so I think the proposed in #87 config is a good solution.

[thernstig]

@ArnaudBarre just so I understood. Both layouts and pages can have all of the consts's I showed in the original post, including metadata i.e. a page.tsx can have metadata as well.

[ArnaudBarre]

Fixed in 0.4.22!

[thernstig]

@ArnaudBarre it seems metadata was not included? Just noticed when upgrading now.

[ArnaudBarre]

Done in v0.4.23!