React Templates & Themes Logo React Templates & Themes
Next Chakra Starter screenshot

Next Chakra Starter

Author Avatar Theme by Hendraaagil
Updated: 20 Jul 2023
31 Stars

An opinionated simple starter / template project with Next.js and Chakra UI. Created by hendraaagil.

Github Live Preview

Categories

Nextjs Chakra ui

Overview:

The Next.js Chakra UI Starter Template is a project created by Hendra Agil. This template provides a starting point for developers to quickly set up a Next.js project with Chakra UI. It comes with pre-installed packages such as Next SEO and React Icons, and includes various features for customization and optimization.

Features:

  • Custom breakpoints & font: Users can easily edit the breakpoints and font settings in the styles/theme.js file.
  • Global style customization: The global style can be edited in the styles/styles.js file.
  • Page transition customization: Developers can customize the page transition by modifying the MotionBox component in the pages/_app.js file.
  • Next SEO configuration file: The template includes a next-seo.config.js file for customizing meta tags, favicon, open graph, and more.

Installation:

To use this template, follow these steps:

  1. Clone this template using degit:

    npx degit [template-url] [your-project-name]

  2. Change “next-chakra-project” with your own project name.

  3. Install all dependencies using either yarn or npm:

    • Using yarn:
      yarn install
    • Using npm:
      npm install

  4. Customize options:

    • Custom breakpoints & font: Edit the breakpoints and font settings in the styles/theme.js file.
    • Import preferred font: Import your preferred font in the pages/_document.js file for automatic webfont optimization.
    • Edit global style: Customize the global style in the styles/styles.js file.
    • Customize page transition: Modify the MotionBox component in the pages/_app.js file.
    • Next SEO configuration: Customize meta tags, favicon, open graph, etc. in the next-seo.config.js file.
    • Customize nprogress: Modify the styles/css/nprogress.css file.

Summary:

The Next.js Chakra UI Starter Template is a useful starting point for developers looking to quickly set up a Next.js project with Chakra UI. It provides pre-installed packages and features for customizing breakpoints, font, global style, page transition, and Next SEO configuration. With easy installation and customization options, this template offers a convenient way to kickstart a Next.js project.