I've found that some files in `/pages/` | Next.js | Page 1

gilded sigil Dec 9, 2023, 1:09 AM

#

ESLint rules are great for this: https://eslint.org/docs/latest/rules/no-restricted-imports

river yoke Dec 9, 2023, 1:15 AM

#

I didn't know about this rule! Great suggestion, thank you! Though I would prefer if NextJS would detect things like this on its own.

gilded sigil Dec 9, 2023, 7:09 AM

#

There are a lot of good reasons to share code between the API and the client, especially for logic like formatting, sorting, filtering etc. or constants that you want to be consistent.

#

You can always add a cheeky if (typeof window !== 'undefined') throw new Error('DONT USE ME') in a file you want to be absolutely sure doesn't get imported.

river yoke Dec 10, 2023, 1:08 PM

#

I've tried this, but it doesn't seem to be catching the problems. We have a monorepo, and the NextJS app is under a subdir but eslint is configured at the top level. My eslintrc.json has this now:

    "import/no-restricted-paths": [
      "error",
      {
        "zones": [
          {
            "target": [
              "./apps/APPNAME/pages/!(api)/**/*",
              "./apps/APPNAME/pages/*"
            ],
            "from": [
              "./apps/APPNAME/pages/api",
              "@/pages/api"
            ],
            "message": "NextJS pages must not import code from api"
          }
        ]
      }
    ]
  }

river yoke Dec 11, 2023, 8:59 PM

#

I've learned that no-restricted-paths apparently doesn't support negated globs. I had to manually list each of my directories under pages, except api. 😦

#I've found that some files in `/pages/`