The latest articles on DEV Community by Kriz Poon (@krizpoon). https://dev.to/krizpoon https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F219689%2F55a148ae-6b89-47ac-8624-e7c2b4f5e9bd.jpeg https://dev.to/krizpoon en Kriz Poon Sun, 25 Sep 2022 22:18:11 +0000 https://dev.to/krizpoon/eslint-folder-naming-rule-for-nextjs-slug-folders-54md https://dev.to/krizpoon/eslint-folder-naming-rule-for-nextjs-slug-folders-54md <p>We have a <code>check-file/folder-naming-convention</code> ESLint rule in our NextJS project.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>"check-file/folder-naming-convention": [ "error", { "src/pages/**/": "KEBEB_CASE", ... } ] </code></pre> </div> <p>It was fine until we have a <code>[slug]</code> folder for some dynamic routes.</p> <p>Luckily, <code>check-file/folder-naming-convention</code> supports custom pattern. Here is how we solved it:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>"check-file/folder-naming-convention": [ "error", { "src/pages/**/": "?(\\[)+([a-z0-9-])?(\\])", ... } ] </code></pre> </div> eslint nextjs glob