Your Next Chakra ⚡️

A custom boilerplate to get the fastest project setup for Next.js with Chakra UI.

Visit the demo here.

Features

📦 This starter template comes with a minimal setup for the following packages:

• Next.js (v12)
• React (v18)
• Chakra UI (v2)
• ESLint — Using the Airbnb config.
• Prettier — Help you format your code.
• Husky — Custom script to check before commiting (coming soon ⏳).
• next-seo — Give you better SEO config (coming soon ⏳).

You can also check the package.json for more detailed packages.

Getting Started

📚 There are several ways to use this template:

1. Use this repository as a template

Note: there will be an attribution on your repository if you use it as a template. Check this repository as an example.

2. Install via npm

npx create-next-app YOUR_APP_NAME --use-npm --example "https://github.com/ilhambara/your-next-chakra"

3. Clone as usual

For those who prefer to clone it, you can clone it as usual.

Install dependencies

npm install
# or
yarn install

Run the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Important: There are some things you need to change including assets, styles, file structures, etc. You should check them all first.

References

To learn more about packages used in this repository, take a look at the following resources:

• Next.js Docs — Learn about Next.js features and API.
• Chakra UI Docs — Setup Chakra UI for Next App.
• ESLint Docs — Configuration in ESLint.
• Prettier Docs — Code formatting with Prettier.

License

MIT License

Copyright (c) 2022 Ilham Mubarok.