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

Overview

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

Comments
  • "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"]
            }
          }
        ]
      ]
    }
    
    help wanted 
    opened by andrewschreiber 12
  • Consistent Issue: Invalid Tailwind CSS classnames order

    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"
          ]
        }
      ]
    }
    
    
    question 
    opened by aceaspades-worldspark 11
  • Feature/absolute imports

    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

    opened by ingokpp 8
  • Can't disable CSS purging

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

    opened by rbeer 6
  • ESLint parsing error due to parserOptions config. Related to Cypress/Jest?

    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
    
    question 
    opened by CarpeDN 5
  • Use getLayout function to customize layout

    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} />)
    }
    
    question 
    opened by riolly 5
  • Can't lint .tsx files

    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!

    question 
    opened by znat 4
  • [QUESTION} - How to prevent ESLint errors from stopping deployment process

    [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

    opened by max-programming 4
  • Headless ui not working with this boilerplate when updating to react 18

    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/[email protected]

    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 [email protected]; yarn add [email protected]
    3. Now toggle does not work

    Thanks!

    invalid 
    opened by lveillard 4
  • Unresolved module when using absolute import

    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?

    opened by ddsuhaimi 4
  • Failed to load plugin 'tailwindcss' declared in '.eslintrc#overrides[0]': Unexpected token '?'

    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?

    invalid 
    opened by szygendaborys 3
  • Next 18 n or i18n

    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

    enhancement 
    opened by ShintaroNippon 6
Releases(v3.3.0)
Owner
Remi W.
Software engineer
Remi W.
This is the Official Starter template for the AMAZON 5 Day challenge (The SECRET Challenge!) - Next.js | React.js | Tailwind CSS | Redux | Tailwind | Firebase

Installation Steps Using npm Run commands npm install npm run dev Or using yarn Run commands npm install --global yarn yarn install yarn run dev If yo

Sonny Sangha 294 Nov 29, 2022
Pankod 1.4k Nov 30, 2022
A starter project for next js with authentication - Contains React 17 + Typescript + Tailwind CSS 2 + React Query 3 + GitHub Auth + LinkedIn Auth + Password-less Auth + Fauna DB

nextjs-starter A Next.js starter kit template with React 17 + Typescript + Tailwind CSS 2 + React Query 3 + NextAuth.js (with GitHub Auth + Passwordle

Bhanu Teja Pachipulusu 403 Nov 25, 2022
This is a Next.js, Tailwind CSS blogging starter template.

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Timothy 3.7k Nov 30, 2022
This is a Next.js + Tailwind CSS starter for the very fun Wordle app

Another Wordle - Next.js + Tailwind CSS + Typescript Starter Live Demo • Follow me on Twitter This is a Next.js + Tailwind CSS starter for the very fu

Bilal 3 Apr 21, 2022
Next.js Notion Starter Kit - The perfect starter kit for building websites with Next.js and Notion.

Next.js Notion Starter Kit The perfect starter kit for building websites with Next.js and Notion. Intro This repo is what I use to power my personal b

Shirish Veerabattini 23 Sep 26, 2022
A starting boilerplate for a TS Next.js project with batteries included. Tailwind CSS in JIT mode for styling, Jest and React Testing Library working with path aliases and node-mock-http for API route testing.

This is a Next.js project that includes Tailwind CSS in JIT mode, TypeScript and Jest with @testing-library with working TS path aliases. Getting Star

Antonio Lo Fiego 38 Apr 25, 2022
This example shows how to use Tailwind CSS (v2.2) with Next.js.

This example shows how to use Tailwind CSS (v2.2) with Next.js.

null 1 Feb 6, 2022
This example shows how to use Tailwind CSS (v3.0) with Next.js

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Sercan NAYA 1 Jan 3, 2022
Full-stack boilerplate (project/hackathon starter) with Docker/NodeJS/Typescript/GraphQL/React/Material-UI

The KNESTS Stack KNEx.js NEST.js NExT.js TS GraphQL Docker The above libraries and frameworks are the best ones (in my opinion, of course) regarding m

Tudor Constantin 280 Nov 25, 2022
A developer blog starter for 2020 (Next.js + React + TypeScript + Markdown + syntax highlighting)

Devii A developer blog starter for 2020. Next.js React TypeScript Markdown syntax highlighting SEO RSS generation if you're happy and you know it, sta

Colin McDonnell 461 Nov 27, 2022
Non-opinionated TypeScript starter for Next.js

Non-opinionated TypeScript starter for Next.js Highly scalable foundation with the best DX. All the tools you need to build your next project. Created

Opa Kholis Majid 6 Feb 9, 2022
Non-opinionated TypeScript starter for Next.js

Non-opinionated TypeScript starter for Next.js Highly scalable foundation with the best DX. All the tools you need to build your next project. Created

Opa Kholis Majid 2 Dec 9, 2021
Fullstack Next.js E-Commerce made with NextAuth + Prisma, Docker + TypeScript + React Query + Stripe + Tailwind Sentry and much more 🛒

Fullstack Next.js Ecommerce Technologies ?? Next.js(React) TypeScript Prisma NextAuth Stripe Tailwind React Query Sentry Yup Screenshots ?? Code Examp

Olaf Sulich 524 Dec 4, 2022
Static multi-language boilerplate with editable pages and navigation from the CMS using Netlify CMS + Next.js + SCSS + Typescript.

A fully static website generator with i18n features, Netlify serverless CMS, Next.js, SCSS and Typescript. See the live demo Stack Netlify CMS Next.js

Tancredi Trugenberger 42 Oct 25, 2022
Next.js, Styled-Components, Material UI, Redux, Typescript Boilerplate (Docker Ready)

Next-SMRT Next.js, Styled Components, Material-UI, Redux (With Redux-Toolkit), Typescript A lot of the next.js examples have some of those features bu

Chris Sprance 54 Nov 3, 2022
Notion-powered blog starter with Nextjs and Tailwind

Nextjs Notion Blog Starter Default demo - Deployed from main branch Blog setup - I wrote an article on how to use this starter to start your blog My p

Tuan Phung 87 Dec 5, 2022
Solana blockchain candy machine app boilerplate on top of Metaplex Candy Machine. NextJS, Tailwind, Anchor, SolanaLabs.React, dev/mainnet automation scripts.

Solana blockchain candy machine app boilerplate on top of Metaplex Candy Machine. NextJS, Tailwind, Anchor, SolanaLabs.React, dev/mainnet automation scripts.

Kevin Faveri 264 Nov 11, 2022