santospatrick/nextjs-boilerplate-advanced

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

• Live Demo
• Storybook Demo

Usage

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 🎉

Deployment

• 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

Instructions

How to get the most out of this boilerplate 🚀

MJML usage

• You can generate your e-mail templates from MJML by running the following command:

yarn emails

The generated .html files will be located in ./emails/dist/

• You can also watch for MJML file changes in your ./emails/templates folder by running:

yarn emails:watch

Any change in the .mjml files will generate new .html template files.

Features

v1

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

v2

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

Technologies

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

Storybook

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

Contributors

Patrick Santos Bitonti Teixeira

Lincoln M. Costa

João Paulo Rodrigues