Create a NextJS blog site

NextJS

This site was created with NextJS, ChakraUI and TypeScript. NextJS is good framework for creating ReactJS based sites. It has options for Statically generating websites (SSG), server-side rendering (SSR) and Client-side routing (CSR).

I wanted to keep the architecture simple, but also have good SEO for the blog pages so SSR seemed a good choice. The SSG approach differs from using a Single Page Application (SPA) like you would have in create-react-app. This is because all of the content is pre-rendered, whereas with the SPA it will load the content via a network call on the first load. This means it is reliant of javascript running and this is why it is consider worse for SEO.

The command below can get you started quickly with and example project with the key components in place.

create-next-app next-ts-chakra --example with-typescript

For my blog I added a renderer (called marked) to read markdown files and turn them into html. This allows me to write my blog posts in markdown. Then when running build process it will be turned into HMTL and deployed as static assets.

Chakra UI

I found ChakraUI to be a good framework and was especially good for having quick utility styles and helpers that made responsive design much easier. It has a good range of components to use for the common use cases. In an ideal world I would like to create a dedicated design system, but for quickly putting a website together this library worked well.

Build and Deployment

To statically generate the site run the command below. This will create an out directory that can be deployed to many providers such as AWS, Netlify, Fastly, or Vercel to name a few.

yarn build && yarn export

Personally I like to use AWS so I deploy the static assets into an S3 bucket and use the AWS CloudFront Content Delivery Network (CDN). This allows the content to be cached closer to users in their locations around the globe.