https://github.com/sozonome/nextarter-chakra

battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup ✨
https://github.com/sozonome/nextarter-chakra

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

Last synced: about 2 months ago
JSON representation

battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup ✨

• Host: GitHub
• URL: https://github.com/sozonome/nextarter-chakra
• Owner: sozonome
• License: mit
• Created: 2020-08-13T04:09:44.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-07-29T04:07:22.000Z (5 months ago)
• Last Synced: 2024-08-10T07:01:16.394Z (4 months ago)
• Topics: boilerplate, boilerplate-template, chakra-ui, nextjs, nextjs-boilerplate, nextjs-starter, nextjs-template, react, starter-template, template, typescript
• Language: TypeScript
• Homepage: https://nextarter-chakra.sznm.dev/
• Size: 2.82 MB
• Stars: 792
• Watchers: 4
• Forks: 99
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-chakra-ui - Nextchakra-starter
• awesome - sozonome/nextarter-chakra - battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup ✨ (TypeScript)
• Awesome-NextJs - nextarter-chakra - [demo](https://nextarter-chakra.sznm.dev/) (Nextjs Starter)

README

        




    




  
This is a Next.js project bootstrapped with create-next-app, added with Chakra UI and TypeScript setup. 
 Start developing right away!




## 🔋 ⚡ Battery Packed template

- 🚀 **Next.js 13** - **React 18**

- ⛓️ **TypeScript**

- **Chakra-UI** v2

- ✔️ **toolings** for linting, formatting, and conventions configured

  - `eslint`, `prettier`, `husky`, `lint-staged`, `commitlint`, `commitizen`, and `standard-version`

  - `pre-commit`, `pre-push`, `commit-msg`, `prepare-commit-msg` hook configured

- 📱 **PWA-ready** - `next-pwa` configured, enabled by default, just disable it through `next.config.js`

- 🔎 SEO optimization configured - with `next-sitemap`.

  - you'll need to reconfigure or tinker with it to get it right according to your needs, but it's there if you need it.

- 🎨 basic responsive layout configured - don't need it? just remove it 😃

- 🤖 **Automatic Dependency Update** with [Renovate](https://renovatebot.com/)

- 🏎️ **Turbo** setup

- 🧪 **Playwright** E2E Test

[![CodeFactor](https://www.codefactor.io/repository/github/sozonome/nextarter-chakra/badge)](https://www.codefactor.io/repository/github/sozonome/nextarter-chakra)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=sozonome_nextarter-chakra&metric=alert_status)](https://sonarcloud.io/dashboard?id=sozonome_nextarter-chakra) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=sozonome_nextarter-chakra&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=sozonome_nextarter-chakra) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=sozonome_nextarter-chakra&metric=bugs)](https://sonarcloud.io/dashboard?id=sozonome_nextarter-chakra) [![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=sozonome_nextarter-chakra&metric=code_smells)](https://sonarcloud.io/dashboard?id=sozonome_nextarter-chakra) [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=sozonome_nextarter-chakra&metric=duplicated_lines_density)](https://sonarcloud.io/dashboard?id=sozonome_nextarter-chakra)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

## Pre-requisites

1. [Node.js](https://nodejs.org/en/) or nvm installed.

2. `pnpm` installed.

## Getting Started

1. You can either click `Use this template` button on this repository and clone the repo or directly from your terminal:

```bash

npx degit sozonome/nextarter-chakra 

```

2. After cloning the project, run this command: `pnpm` or `pnpm install`

3. Then, run the development server:

```bash

pnpm dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

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

- [References](/references.md)