Skip to content

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

Notifications You must be signed in to change notification settings

inovando/nextjs-boilerplate-advanced

 
 

Repository files navigation

santospatrick/nextjs-boilerplate-advanced

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

Netlify Status eslint prettier typescript vscode

DigitalOcean Referral Badge

Usage

  1. Initialize your project with this command:
yarn create next-app -e https://github.com/santospatrick/nextjs-boilerplate-advanced
  1. Duplicate .env.example to .env.local fulfilling variables as needed
cp .env.example .env.local
  1. Run the following commands:
yarn install
yarn dev # start development server
  1. 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
Deploy to Netlify Deploy with Vercel

Instructions

How to get the most out of this boilerplate 🚀

Slides.com template presentation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.0%
  • Handlebars 2.4%
  • JavaScript 2.3%
  • Shell 0.3%