Next.js boilerplate made with Chakra-UI + Typescript + React-table + React-hook-form

• Live Demo
• Storybook Demo

1. Initialize your project with this command:

yarn create next-app -e https://github.com/santospatrick/nextjs-boilerplate-advanced

2. Duplicate .env.example to .env.local fulfilling variables as needed

cp .env.example .env.local

3. Run the following commands:

yarn install
yarn dev # start development server

4. Done 🎉

• Run the following commands:

yarn build # this command will fail if there is any Typescript or Lint errors
yarn start

• Or, deploy on Netlify, Vercel (don't forget about environment variables):

Netlify	Vercel

How to get the most out of this boilerplate 🚀

• Authentication screens pre-built
• Server side rendering
• Forms (compatible with react-hook-form)
  • Text Input (masked/normalized)
  • Date Input
  • Upload Input
  • Autocomplete/Select Input
  • Number Input
  • Phone Input
  • Textarea Input
  • Schema validation with yup
• Data table with inline editing
• Layouts
• CRUD example
• Modal with fullscreen option
• Email templates for authentication flow
• VSCode workspace recommendations
• Profile page for user editing
• Collapsable & nested menu
• Code Generator (component, form, and page)
• VSCode debug setup

• Advanced filter for data tables (like Notion)
• Form builder

• Next.js
• Typescript
• Chakra UI
• Next SEO
• React Table
• Eslint/Prettier
• React Toastify
• React Query
• React Hook Form
• NProgress
• Git hooks
• Perfect scrollbar
• Mjml
• useHooks Typescript
• Utility Types
• Storybook
• Plop (Template Generator)

In order to see storybook, run development server with following command:

yarn install # if you didn't yet :)
yarn storybook # start server at http://localhost:6006

Patrick Santos Bitonti Teixeira

Lincoln M. Costa