🚀 Boilerplate and Starter for Next.js 12+, Tailwind CSS 2.0 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS

  • By Remi W.
  • Last update: Dec 31, 2022
  • Comments: 12

Boilerplate and Starter for Next JS 12+, Tailwind CSS 2.0 and TypeScript Twitter

Next js starter banner

🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.

Clone this project and use it to create your own Next.js project. You can check a Next js templates demo.

Features

Developer experience first:

  • 🔥 Next.js for Static Site Generator
  • 🎨 Integrate with Tailwind CSS (w/ JIT mode)
  • 💅 PostCSS for processing Tailwind CSS and integrated to styled-jsx
  • 🎉 Type checking TypeScript
  • Strict Mode for TypeScript and React 17
  • ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
  • 🛠 Code Formatter with Prettier
  • 🦊 Husky for Git Hooks
  • 🚫 Lint-staged for running linters on Git staged files
  • 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
  • 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
  • ⚙️ Bundler Analyzer
  • 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
  • 🌈 Include a FREE minimalist theme
  • 💯 Maximize lighthouse score

Built-in feature from Next.js:

  • Minify HTML & CSS
  • 💨 Live reload
  • Cache busting

Philosophy

  • Minimal code
  • SEO-friendly
  • 🚀 Production-ready

Nextless.js SaaS Boilerplate

Building your SaaS product faster with Nextless JS SaaS Boilerplate.

Nextless React SaaS Boilerplate

Premium Themes

Green Nextjs Landing Page Template Purple Saas Nextjs Theme
Green Nextjs Landing Page Template Blue Landing Page Nextjs Theme

Find more Nextjs Themes.

Requirements

  • Node.js and npm

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install

Then, you can run locally in development mode with live reload:

npm run dev

Open http://localhost:3000 with your favorite browser to see your project.

.
├── README.md                # README file
├── next.config.js           # Next JS configuration
├── public                   # Public folder
│   └── assets
│       └── images           # Image used by default template
├── src
│   ├── layout               # Atomic layout components
│   ├── pages                # Next JS pages
│   ├── styles               # PostCSS style folder with Tailwind
│   ├── templates            # Default template
│   └── utils                # Utility folder
├── tailwind.config.js       # Tailwind CSS configuration
└── tsconfig.json            # TypeScript configuration

Customization

You can easily configure Next js Boilerplate. Please change the following file:

  • public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png and public/favicon-32x32.png: your website favicon, you can generate from https://favicon.io/favicon-converter/
  • src/styles/main.css: your CSS file using Tailwind CSS
  • src/utils/AppConfig.ts: configuration file
  • src/templates/Main.tsx: default theme

Deploy to production

You can see the results locally in production mode with:

$ npm run build
$ npm run start

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.

You can create an optimized production build with:

npm run build-prod

Now, your blog is ready to be deployed. All generated files are located at out folder, which you can deploy with any hosting service.

Deploy to Netlify

Clone this repository on own GitHub account and deploy to Netlify:

Netlify Deploy button

Deploy to Vercel

Deploy this Next JS Boilerplate on Vercel in one click:

Deploy with Vercel

VSCode information (optional)

If you are VSCode users, you can have a better integration with VSCode by installing the suggested extension in .vscode/extension.json. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.

Pro tips: if you need a project wide type checking with TypeScript, you can run a build with Cmd + Shift + B on Mac.

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

License

Licensed under the MIT License, Copyright © 2020

See LICENSE for more information.


Made with by CreativeDesignsGuru Twitter

Sponsor Next JS Boilerplate

Github

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

Comments(12)

  • 1

    "Disabled SWC as replacement for Babel because of custom Babel configuration"?

    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"]
            }
          }
        ]
      ]
    }
    
  • 2

    Consistent Issue: Invalid Tailwind CSS classnames order

    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"
          ]
        }
      ]
    }
    
    
  • 3

    Feature/absolute imports

    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

  • 4

    Can't disable CSS purging

    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.

    devtools

    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'?

  • 5

    ESLint parsing error due to parserOptions config. Related to Cypress/Jest?

    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
    
  • 6

    Use getLayout function to customize layout

    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} />)
    }
    
  • 7

    Can't lint .tsx files

    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:

    image

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

  • 8

    [QUESTION} - How to prevent ESLint errors from stopping deployment process

    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?

    image

  • 9

    Headless ui not working with this boilerplate when updating to react 18

    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>    
    
    1. Test the toggle => it works
    2. update to react 18 beta => yarn add react-dom@next; yarn add react@next
    3. Now toggle does not work

    Thanks!

  • 10

    Unresolved module when using absolute import

    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?

  • 11

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

    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?

  • 12

    Next 18 n or i18n

    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