Next.js Chakra UI Starter Template

Getting Started

1. Clone this template using degit, change "next-chakra-project" with your own project name
   

    npx degit hendraaagil/next-chakra-starter "next-chakra-project"
   

2. Install all dependencies
   

   Recommended using yarn

    cd next-chakra-project
    yarn
   

   or using npm

    cd next-chakra-project
    npm install
   

3. For customizing options please see Features section.

4. Or you can click "Use this template" button above.

Features

There is some pre-installed packages in this template:

• next-seo
• nprogress
• react-icons

Some features in this template:

1. Custom breakpoints & font
   You can edit breakpoints & font in styles/theme.js.
   Import your preferred font in pages/_document.js to apply automatic webfont optimization.
2. Global style
   You can edit global style in styles/styles.js.
3. Page transition
   If you want to custom the page transition go to pages/_app.js in MotionBox component.
4. Next SEO config file
   You can custom meta, favicon, open graph, etc. in next-seo.config.js.
5. You also can customize nprogress in styles/css/nprogress.css.
6. Using absolute path based on jsconfig.json file.

Documentation

For more guides, please read:

• Next.js Documentation
• Chakra UI Documentation

License

This project is under MIT License

Credits

Created by Hendra Agil