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

• 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

v2

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

Technologies

• 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)

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