https://github.com/yehezkielgunawan/yehez-nextchakra-starter

🌀Personalized NextJS + TS + Chakra UI starter template⚡
https://github.com/yehezkielgunawan/yehez-nextchakra-starter

boilerplate boilerplate-template chakra-ui next-boilerplate nextjs nextjs-boilerplate nextjs-example nextjs-starter nextjs-typescript react starter-template template typescript

Last synced: 2 months ago
JSON representation

🌀Personalized NextJS + TS + Chakra UI starter template⚡

• Host: GitHub
• URL: https://github.com/yehezkielgunawan/yehez-nextchakra-starter
• Owner: yehezkielgunawan
• License: mit
• Created: 2021-10-01T07:34:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-24T06:14:14.000Z (over 2 years ago)
• Last Synced: 2025-03-29T17:33:16.805Z (3 months ago)
• Topics: boilerplate, boilerplate-template, chakra-ui, next-boilerplate, nextjs, nextjs-boilerplate, nextjs-example, nextjs-starter, nextjs-typescript, react, starter-template, template, typescript
• Language: TypeScript
• Homepage: https://yehez-nextchakra-starter.yehezgun.com/
• Size: 890 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Yehez-NextChakra-Starter

![Yehezkiel Gunawan's Next JS + Chakra UI Personalized template](https://socialify.git.ci/yehezkielgunawan/yehez-nextchakra-starter/image?description=1&logo=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1607554385%2Frepositories%2Fnext-js%2Fnext-logo.png&owner=1&pattern=Circuit%20Board&theme=Dark)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/yehezkielgunawan/yehez-nextchakra-starter) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/yehezkielgunawan/yehez-nextchakra-starter)

[![forthebadge](https://res.cloudinary.com/yehez/image/upload/v1635325228/made-by-typescript_mz1tue.svg)](https://forthebadge.com)

This is a Next JS + Chakra UI personalized template based on [Chakra UI examples template](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript). Live demo can be accessed at [yehez-nextchakra-starter.yehezgun.com](https://yehez-nextchakra-starter.yehezgun.com). Actually, I made this for myself so I don't need to waste my time to overthinking about the config and setup and focusing on the development.

But if you also find this template is useful, you also can use it. And of course I'm open to any feedbacks. You can fork or clone this repo and make a PR here if you have a some idea.

## ⚡ What's include here?

- Toolings for linting, formatting, and conventions configured. 


  `eslint`, `prettier`, `husky`, & `lint-staged`.

- ✨Basic responsive layout configuration (using Chakra UI media query)

- SEO Optimization (using `next-seo`)

- Now using Next.js 12 with Rust Compiler Minification enabled (you can disabled it at `next.config.js`)

## How to use it?

- You can open [yehez-nextchakra-starter.yehezgun.com](https://yehez-nextchakra-starter.yehezgun.com) and click `Use this template` button (**_Don't forget to login to your Github account_**).

- Or you can clone this repo using degit in your terminal. Don't forget to install the needed dependencies using `npm install` or `yarn`.

```

npx degit yehezkielgunawan/yehez-nextchakra-starter 

```

- Or you also can easily use this template by run:

```

npx create-next-app --example https://github.com/yehezkielgunawan/yehez-nextchakra-starter 

```

- Then run the local server using `yarn dev` or `npm run dev`

## References

- [Next.js Docs](https://nextjs.org/docs/getting-started) - Learn about Next JS and its features

- [Chakra UI](https://chakra-ui.com/) - UI component

- [Typescript](https://www.typescriptlang.org/) - The programming language

- [Sozonome NextChakra Starter Template](https://github.com/sozonome/nextchakra-starter) - as my main reference for the layout and modularized components concept. Thanks for the idea and concept bro, it really helps me a lot to learn React and its tools.