next build command is not ignoring *.stories.tsx files [duplicate]

Question

I am trying to build nextjs project which has [componentName].stories.tsx side by side with component itself. Running next build fails because of typescript errors in these stories. I want next to ignore storybook files. Is it possible and if yes how do I do it ?

Answer 1

Please add the stories into ignored pattern array in your lint file, here is an example:

{
    "ignorePatterns": ["temp.js", "**/vendor/*.js"],
    "rules": {
        //...
    }
}

Answer 2

Depending on the specifics of your situation, Next.js does provide a solve:

Including non-page files in the pages directory

To colocate test files, generated files, or other files used by components in the pages directory, you can prefix the extensions with something like page.

Open next.config.js and add the pageExtensions config:

   module.exports = {
       pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
   }

Then rename your pages to have a file extension that includes .page (ex. rename MyPage.tsx to MyPage.page.tsx).

Note: Make sure you also rename _document.js, _app.js, _middleware.js, as well as files under pages/api/.

We had a similar issue to yours, but it was only a problem with stories that were in the pages folder. This solution worked for our project.