Awesome
<img src="https://og.sznm.dev/api/generate?heading=nextarter-chakra&text=Next.js+template+with+Chakra-UI+and+TypeScript+setup.&template=color¢er=true&height=330" /> <div align="center"> <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsozonome%2Fnextarter-chakra" target="_blank"><img src="https://vercel.com/button" alt="Deploy with Vercel" /></a> <a href="https://app.netlify.com/start/deploy?repository=https://github.com/sozonome/nextarter-chakra" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a> <a href="https://railway.app/new/template/aqmmai?referralCode=9lKVVo" target="_blank"><img src="https://railway.app/button.svg" alt="Deploy on Railway" height="32px" /></a><a href="https://stackblitz.com/github/sozonome/nextarter-chakra" target="_blank"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" /></a>
<p>This is a <a href="https://nextjs.org/" target="_blank">Next.js</a> project bootstrapped with <code>create-next-app</code>, added with <a href="https://chakra-ui.com" target="_blank"><b>Chakra UI</b></a> and <a href="https://www.typescriptlang.org" target="_blank"><b>TypeScript</b></a> setup. <br/> Start developing right away!</p> </div>🔋 ⚡ Battery Packed template
- 🚀 Next.js 14 - React 18
- ⛓️ TypeScript
- Chakra-UI v2
- ✔️ toolings for linting, formatting, and conventions configured
eslint,prettier,husky,lint-staged,commitlint,commitizen, andstandard-versionpre-commit,pre-push,commit-msg,prepare-commit-msghook configured
- 📱 PWA-ready -
next-pwaconfigured, enabled by default, just disable it throughnext.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
- 🏎️ Turbo setup
- 🧪 Playwright E2E Test
Pre-requisites
- Node.js or nvm installed.
pnpminstalled.
Getting Started
- You can either click
Use this templatebutton on this repository and clone the repo or directly from your terminal:
npx degit sozonome/nextarter-chakra <YOUR_APP_NAME>
-
After cloning the project, run this command:
pnpmorpnpm install -
Then, run the development server:
pnpm dev
Open 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.