Next JS 12 boilerplate with Typescript and Material UI 5

🚀 NextJS 12 boilerplate built with Typescript, Material UI, Emotion CSS, FontAwesome, ESLint, Prettier, Husky, Lint-Staged, Jest, Cypress.

Clone this project and use it to create your own Next.js project.

Features

Developer experience first:

🔥 Next.js
🎨 Material UI 5 as base library component
💅 Emotion CSS for css styling
🎉 Type checking TypeScript
✅ Strict Mode for TypeScript and React 17
✏️ Linter with ESLint (default NextJS)
🛠 Code Formatter with Prettier
🦊 Husky for Git Hooks
🚫 Lint-staged for running linters on Git staged files
⚙️ Bundler Analyzer
🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
💂‍♂️ Jest, Cypress, React-testing set up for unit ,integrate, e2e testing

Philosophy

Minimal code
🚀 Production-ready

Requirements

Node.js and npm

Getting started

Run the following command on your local environment:

git clone https://github.com/anguyen227/nextjs-boilerplate
cd nextjs-project-name
yarn install

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

yarn dev

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

.
├── README.md                # README file
├── next.config.js           # Next JS configuration
├── components               # Atomic layout components
├── cypress                  # cypress spec tests
├── pages                	 # Next JS pages
├── public                   # Public folder
├── styles               	 # PostCSS style folder with Tailwind
├── utils                	 # Utility folder
├── theme.ts          		 # material ui theme declaration
├── cypress.json          	 # cypress config
├── jest.config.js       	 # jest configuration
├── global.d.ts       		 # global typings
├── mui.d.ts       			 # overriden material ui types
└── tsconfig.json            # TypeScript configuration

Deploy to production

You can see the results locally in production mode with:

$ yarn build
$ yarn start

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 Vercel

Deploy this Next JS Boilerplate on Vercel in one click:

Contributions

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

License

See LICENSE for more information.

noneall/nextjs-boilerplate