📑

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

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