Next.js + Chakra-UI + Typescript Boilerplate
A modern development stack
- How to reuse types correctly, and stop using "any" where unnecessary
- Chakra-UI, Next.js, Libraries support
- Utility types
- explicit-module-boundary-types and no-explicit-any rules and why they matter
- Module path aliases
- VSCode autocomplete
Typescript
React Hook Form
Let's build a simple react form, then translate it into React Hook Form and finally learn how type it correctly :)
React Query
Together with react-hook-form, lets learn how to fetch data without explicitly writing any hooks :)
- useImperativeHandle (very useful with forms)
- forwardRef
- Transform everything into hooks, stop using components (just like useController for react-hook-form) whenever possible
React 17 & Tips
- Theme, design system and props
- How to integrate with react-hook-form
- How to integrate with react-table
- Does it have all components?
- Autocomplete
- Uploading documents, images
- Datepicker
- Styled components integration
Chakra-UI
- Server-side rendering
- getServerSideProps
- getStaticProps
- getStaticPaths
- <Image /> component
- Axios? React-query?
- SEO (how to test?)
- Per-page Layouts, and pages per file
- Migrating from create-react-app
Next.js
Deploy
After running yarn build, the app will be built on .next folder, which CAN'T be served in a static provider like Hostinger (only on their VPS Linux)
1
Built on server
In order for Next.js to run server side rendering and data fetching code, we need a server that supports Node.js
2
Node.js
Just like Vercel headline: Develop, Preview, Ship. Vercel, Netlify, Heroku has support for PR deploys and SSR (with limited free usage, but reasonable)
3
Perfect worflow
Let's deploy on Netlify for now 🚀
Maintainability
Next.js is being constantly updated with new features, development server speed improvements, and bug fixes
(This slide was built in July 13th)
Common commands
| Bash commands |
|---|
| yarn dev # start development server |
| yarn tsc # check for invalid typescript types |
| yarn lint # check for ESLint/Prettier warning and Next.js best practices |
| yarn build # check for errors before even deploying the app, and build the app on `.next` folder |
| yarn storybook # test components in an isolated environment |
Generators
| Bash commands |
|---|
| yarn generate component # will ask questions and create a component following boilerplate best practices |
| yarn generate form # will ask questions and create a form with validation following boilerplate best practices |
| yarn generate page # will ask questions and create a page with layout following boilerplate best practices |
- Lodash (debounce, get, omit)
- React select (autocompletes and multiselects)
- next-seo (PWA, SEO and social media sharing cards)
- react-dropzone (upload component with drang & drop feature)
- react-toastify (customizable toasts)
- react-icons
Hidden gems
Sometimes when commiting through VSCode UI you might receive this message for machines that setup Node.js with nvm.
Â
To fix that, just create a ~/.huskyrc with the following content:
Known issues
# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before
# running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"We made it!
Questions?
Next.js + Chakra-UI + Typescript
By Patrick Santos
