One of the big upgrades in Next 12 is use of the fast rust compiler SWC. Is there any way this .babelrc could be altered or removed while maintaining project functionality?

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

Every time I save the file, the order of Tailwind CSS classnames are automatically changed, even when they are correct. Like, every time. And each save scrambles them in an incorrect order.

Here's my .eslintrc:

{
  // Configuration for JavaScript files
  "extends": [
    "airbnb-base",
    "next/core-web-vitals", // Needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "endOfLine": "auto"
      }
    ]
  },
  "overrides": [
    // Configuration for TypeScript files
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": [
        "@typescript-eslint",
        "unused-imports",
        "tailwindcss",
        "simple-import-sort"
      ],
      "extends": [
        "plugin:tailwindcss/recommended",
        "airbnb-typescript",
        "next/core-web-vitals",
        "plugin:prettier/recommended"
      ],
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "singleQuote": true,
            "endOfLine": "auto"
          }
        ],
        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
        "jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system
        "react/require-default-props": "off", // Allow non-defined react props as undefined
        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
        "react-hooks/exhaustive-deps": "off", // Incorrectly report needed dependency with Next.js router
        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
        "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
        "tailwindcss/classnames-order": [
          "warn",
          {
            "officialSorting": true
          }
        ], // Follow the same ordering as the official plugin `prettier-plugin-tailwindcss`
        "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
        "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
        "@typescript-eslint/no-unused-vars": "off",
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
          "error",
          { "argsIgnorePattern": "^_" }
        ]
      }
    },
    // Configuration for testing
    {
      "files": ["**/*.test.ts", "**/*.test.tsx"],
      "plugins": ["jest", "jest-formatting", "testing-library", "jest-dom"],
      "extends": [
        "plugin:jest/recommended",
        "plugin:jest-formatting/recommended",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
      ]
    }
  ]
}

Using Absolute imports is a great way to better organize NextJS projects.

Problem

With relative imports, we have imports that look like this inside of our components. import { Button } from '../../../../../components/Button

Solution

Next.js build in Absolute Imports allow us to change this into import { Button } from '@/components/Button

Hi!

I'm trying to disable CSS purging during development. I'm using the Chromium developer tools as a sort of WYSIWYG editor. The list of suggestions in the image below is populated with all the available CSS classes. Purging naturally strips that list down to those classes that are actually in the markup/code. Since this is for playing around with styling I haven't added to the files yet, I would need an unpurged version.

I've tried to simply set purge: false in the tailwind.config.js, but that gets me the webpack error

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./src/styles/main.css
TypeError: Cannot read properties of undefined (reading 'filter')

Setting purge: [] just removes all classes.

The object declaration

purge: {
    enabled: false,
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
  },

behaves like using an Array, where everything is stripped when content is a filter that finds nothing (e.g. empty). enabled is completely ignored. So is the NODE_ENV variable. Accodring to the tailwind documentation (last paragraph), purging should in general only happen when NODE_ENV === 'production'. Checking directly in tailwind.config.js shows NODE_ENV === 'development', though.

Any ideas how I can disable purgin at all, when NODE_ENV === 'development'?

Hi, great boilerplate by the way. I am seeing this error when I run npm run lint. could it be related to the type check issues with Cypress and Jest?

./cypress/support/e2e.ts
Error: Parsing error: ESLint was configured to run on `<tsconfigRootDir>/cypress/support/e2e.ts` using `parserOptions.project`: <tsconfigRootDir>/../../../../../../users/carpedn/gitlab/boilerplates/next-js-boilerplate/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the TypeScript ESLint docs for more info: https://typescript-eslint.io/docs/linting/troubleshooting##i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

As it's written on the official docs.

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return {
    /** Your content */
  }
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

Hi, thanks a lot for this boilerplate. It works great except (at least for me) for validating/linting .tsx files. The code compiles fine but I have a lot of inconsistent errors, here's an example:

Wondering if you had any pointers on how to solve this? Thanks!

I recently got into a problem where my website wasn't going live because of this ESLint formatting error. Is there a way to prevent this in production and deployment process and keep the settings on in the development process?

Hello all! I'm using this boilerplate (excellent job btw) and i'm unable to make headlessUI work with it when upgrading to react 18.

In this codesandbox, the toggle works as expected: https://codesandbox.io/s/winter-waterfall-qmxf7?file=/pages/index.js

But if you follow the following steps, it does not:

1. clone https://github.com/ixartz/Next-js-Boilerplate

2. yarn add @headlessui/react@next

3. Add this somewhere in the index page

  const [isShowing, setIsShowing] = useState(false)
 ....

        <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
          Toggle
        </button>

        <Transition show={isShowing}>I will appear and disappear.</Transition>    

4. Test the toggle => it works
5. update to react 18 beta => yarn add react-dom@next; yarn add react@next
6. Now toggle does not work

Thanks!

Here's my file structure (I've removed anything that isn't relevant).

- src
  - components
    - Some.tsx
  - pages
    - index.tsx 
- tsconfig.json

I want to import Some.tsx in my index.ts using absolute path. In my tsconfig.json, I have

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "strict": true,
    "alwaysStrict": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,

    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowUnreachableCode": false,
    "noFallthroughCasesInSwitch": true,

    "target": "es5",
    "outDir": "out",
    "declaration": true,
    "sourceMap": true,

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": false,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,

    "jsx": "preserve",
    "noEmit": true,
    "isolatedModules": true
  },
  "exclude": ["./out/**/*", "./node_modules/**/*"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

  // absolute path
  "baseUrl": ".",
  "paths": {
    "@/components/*": ["src/components/*"]
  }
}

I import using this is my index.tsx

import Some from '@/components/Some';

and I got module not found error, but this

import Some from '../components/Some';

works fine.

Any idea why?

Hi!

I've experienced a problem while bootstrapping this project.

The way to reproduce this error is to bootstrap a fresh version from this repo by using git clone. Install npm dependencies and try to execute npm run lint.

This occurs in such error:

Failed to load plugin 'tailwindcss' declared in '.eslintrc#overrides[0]': Unexpected token '?'

Do you have any clues on how to resolve this problem?

Hi there. Thanks by the boilerplate. It is possible to add multi language? Next 18 n or i18n And add redux or I should I use context API?

Thanks in advance Best Shintaro