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 tostyled-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.
Premium Themes
Green Nextjs Landing Page Template | Purple Saas 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
andpublic/favicon-32x32.png
: your website favicon, you can generate from https://favicon.io/favicon-converter/src/styles/main.css
: your CSS file using Tailwind CSSsrc/utils/AppConfig.ts
: configuration filesrc/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:
Deploy to Vercel
Deploy this Next JS Boilerplate on Vercel in one click:
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
"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?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:
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
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.
I've tried to simply set
purge: false
in thetailwind.config.js
, but that gets me the webpack errorSetting
purge: []
just removes all classes.The object declaration
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 theNODE_ENV
variable. Accodring to the tailwind documentation (last paragraph), purging should in general only happen whenNODE_ENV === 'production'
. Checking directly in tailwind.config.js showsNODE_ENV === 'development'
, though.Any ideas how I can disable purgin at all, when
NODE_ENV === 'development'
?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?Use getLayout function to customize layout
As it's written on the official docs.
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:
Wondering if you had any pointers on how to solve this? Thanks!
[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?
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:
clone https://github.com/ixartz/Next-js-Boilerplate
yarn add @headlessui/react@next
Add this somewhere in the index page
Thanks!
Unresolved module when using absolute import
Here's my file structure (I've removed anything that isn't relevant).
I want to import
Some.tsx
in myindex.ts
using absolute path. In mytsconfig.json
, I haveI import using this is my
index.tsx
and I got module not found error, but this
works fine.
Any idea why?
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 executenpm run lint
.This occurs in such error:
Do you have any clues on how to resolve this problem?
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