Starters
- Use hooks.
Clearing Common Misconceptions
- Next JS can be just a static application or a Full-stack application.
- SSG Mode ( Static FE )
- SSR / Hybrid Mode ( Will need a server to run this, Full stack application )
- Next Images optimization runs when the application runs on the server. The images are not optimized on build time. Hence we will need a server for this. Or a serverless setup and is not possible with SSG mode.
- Next Images can optimize images dynamically. This is possible if you can add image domains from FE & BE S3 links.
Deployment and CI/CD
- Deployment options
- AWS Amplify / Serverless
- SSG (
*recommended
) - SSR
- Yet to be tested completely, previous issues with Next Images and setup issues have been fixed.
- Elastic Beanstalk
- SSR
- This would be exclusive for SSR / Hybrid mode. This is a full-blown server some caveats may involve keeping an eye on the server's health statuses, concurrent deployments, writing CI/CD and scalability.
GraphQL Clients
Here there are some decisions you need to make as it affects the UX of the application.
- The two options which work well with NextJS are :
- If you want a client-side graphQL client and you want to handle this with loaders and don't really want to run queries on the server [ SSR ] → You can go with SWR. ( This does not work on the server-side ( at least as of now ) )
- Since you are not running queries on the server-side, page queries with SWR will be client-side and needs to have some sort of loading state.
- The queries will be cached from the client-side.
- If you want a full set-up that can run queries on the server + client-side → Apollo Client works wonderfully here.
- You can avoid page load and page loading states completely here.
- Apollo will cache the queries both on the client-side and server-side - We will need to handle merging these caches by ourselves.
- Try not to use Apollo's HOC components which are now deprecated. They have shifted it completely to use hooks.
Design Systems & Styles
- NextJS 11 has made it a default to use SCSS modules for the components.
- You can have global scss files but the component styles would have to be in the form of modules.
We have two popular design systems here :
- Ant Design
- This works smoothly with NextJS - somewhat.
- You will need to override Ant Design classes with a
:global
keyword. - With modules it would look like -
- Material UI
- This works right out of the box for Next JS as it's similar to styled-components.
- This takes an exhaustive time to set up and build on custom components as it's difficult to reskin.
- For that con, the pro is that due to it being similar to styled-components this can offer incredible control over components as props can be directly set here.
.customCheckbox {
font-size: 30px; # this won't have any issues, will work.
:global {
.ant-checkbox {
.ant-checkbox-inner {
border: 2px solid !important;
background-color: transparent;
}
}
}
}