Starter Guide

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

• The two options which work well with NextJS are :
• SWR
• Apollo client
• 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.

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

.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;
      }
    }
  }
}

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