santospatrick/nextjs-boilerplate-advanced

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

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 🚀

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

nextjs-boilerplate-advanced's Issues

`<ModalFullscreen />`: add `defaultSize` prop

Is your feature request related to a problem? Please describe.
A way of setting a size to <ModalFullscreen /> component

Describe the solution you'd like
Add a new prop called defaultSize

Describe alternatives you've considered
Accept all chakra-ui modal props

Additional context
No.

Logout user from all tabs

Describe the bug
User is not logged out until it refreshes all browser tabs that had the app opened.

To Reproduce
Steps to reproduce the behavior:

1. Log in into the app
2. Open more than one tab at the same time
3. Choose one of the tabs to log out
4. Other tabs won't log out the user

Expected behavior
User should log out immediately from all tabs.

Screenshots
❌

Desktop (please complete the following information):

• Yes

Smartphone (please complete the following information):

• Yes

Additional context
❌

Add generator for `<DataTable />` usage

Is your feature request related to a problem? Please describe.
Currently there is no way to generate code for data tables, which easily gets 100+ lines of code.

Describe the solution you'd like
Add a new generator for data tables at: https://github.com/santospatrick/nextjs-boilerplate-advanced/blob/main/generators/plopfile.js

Describe alternatives you've considered
❌

Additional context
❌

Table duplication

Is your feature request related to a problem? Please describe.
Yes. Implementing one table for each entity can cause serious code duplication issues due to the tables having more lines than other type of files.

Describe the solution you'd like
Just one component for every table, for any entity.

Describe alternatives you've considered
Implementing a "Standard Table" that doesn't limits the current features of the current table system.

Create hook for `<DataTable />` logic

Is your feature request related to a problem? Please describe.
Table logic is creating bigger files, making it harder to maintain.

Describe the solution you'd like
Create a hook for logic inside tables that uses <DataTable />, example: https://github.com/santospatrick/nextjs-boilerplate-advanced/blob/main/src/components/tables/UsersTable/UsersTable.tsx

Describe alternatives you've considered
No.

Additional context
No.

Change browser tab title

Describe the bug
When using any layout (example <PrivatePage />) change browser tab title

To Reproduce
Steps to reproduce the behavior:

1. Use component's prop title
2. Browser tab title won't change

Expected behavior
Expect browser tab title to change.

Screenshots
❌

Desktop (please complete the following information):

• Yes

Smartphone (please complete the following information):

• Yes

Additional context
❌

Storybook for `<DataTable />` component

Is your feature request related to a problem? Please describe.
No, just a lack of documentation.

Describe the solution you'd like
Document the <DataTable /> component in Storybook, just like other components.

Describe alternatives you've considered
None.

Additional context
No.

Set table filters in URL

Is your feature request related to a problem? Please describe.
Currently, table filters are cleared on page refresh.

Describe the solution you'd like
Add filters as query params in URL after form submit.

https://sample-nextjs-app.santospatrick.com/users?[email protected]

Describe alternatives you've considered
No.

Additional context
No.

Ask for "page layout" on page generator

Is your feature request related to a problem? Please describe.
No, it just adds more functionality and automation

Describe the solution you'd like
When generating new pages through script yarn generate, ask for which page layout a new page should use

Describe alternatives you've considered
Adding a new question to be asked inside nextjs-boilerplate-advanced/generators/plopfile.js file

Additional context
Something like this:

New hook `usePermissions()`

Is your feature request related to a problem? Please describe.
Getting user permissions require some coding, which may duplicate code with time.

Describe the solution you'd like
Create a hook usePermissions() which should return an array of logged in user permissions.

// to avoid this
const { user } = useContext(AuthContext);
const { data } = useQuery(
  "user-profiles",
  () => api.get(`users/${user?.id}`),
  {
    enabled: !!user?.id,
  }
);
console.log("profiles ==> ", data?.data.profiles);

Describe alternatives you've considered
Solution would be:

// 🚀
const permissions = usePermissions();
console.log("profiles ==> ", permissions);

Additional context
No.

"How to use" mjml in readme

Is your feature request related to a problem? Please describe.
Currently it is not documented how to use mjml scripts in package.json for development

Describe the solution you'd like
Add tutorials on readme.

Describe alternatives you've considered
No.

Additional context
No.

Filter menu items by permission

Is your feature request related to a problem? Please describe.
Filter menu items based on user profiles.

Describe the solution you'd like
Create an attribute in menu items to set which profiles can/cannot see:

export const menu: MenuItem[] = [
  {
    icon: MdDashboard,
    text: "Dashboard",
    href: "/",
    profiles: ["ADMIN"] // <=====
  },
  // ...
]

Describe alternatives you've considered
No.

Additional context
No.

Use state managers to prevent 100x contexts

Is your feature request related to a problem? Please describe.
As the app grows, it is very common to create more and more React Contexts, which will make app slower.

Describe the solution you'd like
We could use something like RecoilJS (First announced in 2020)

Describe alternatives you've considered
No, please no Redux 🌞

Additional context
No.