Building a Content Driven Blog with Next.js and Typescript

Nov 20th, 2022

•

views

Almost every developer dreams of creating a stylish and functional blog for sharing their journeys about learning in tech. I want to quickly talk through my design choices for the beginning stages of building my own blog.

Content Management

The key part to this all working nicely is being able to manage content well. As a developer who's already familiar with markdown, the next logical step would be using MDX to write all content.

MDX

MDX is a framework that allows you to use Markdown style markup in tandem with JSX (React) components. The concept allows for a more interactive style blogging as you can include JS powered components in your own articles (like code examples that you can edit and run in real time).

I will be building MDX support using contentlayer, which is a SDK that transforms content into type-safe JSON data. It plays nicely with Next.js, which makes it a perfect pair for a developer blog.

For the time being, I will store my posts in a /content directory within the project directory.

Design System

By trade, I am a developer, not a designer, so I wanted to create something simple that looked nice with MDX content.

Style System

When I am designing a website I begin by whipping up a style sheet. There are two major components that I like to decide, and use continually throughout a site.

Colors
Typography

Colors

When dealing with colors, I like to select one primary color, and one or two other colors that play nicely with the primary. You can use a tool like coolors to help with this type of planning. Check out this video by Web Design Life about picking web colors.

Typography

When choosing typography for a website, there is one concept that I consider to be most important to selecting a font, and that is readability. When focusing on a content-heavy site, the most important thing to your users is actually being able to read what is on the site. In my opinion, there is a rather large difference between selecting a font because it looks good, or selecting a font because it's easy to read.

Fonts are interesting, because they can say just as much as colors can when it comes to web design. Sans-serif fonts often go hand in hand with a "modern" feel (think technology) while a serif font often conveys a feel of sophistication. If you are interested in reading more about selecting fonts, visit this google design article.

Layout

💡 Whitespace is the space within individual design elements, including the space between typography glyphs (readable characters). Despite its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image.

Selecting a layout for a website, especially something content-heavy like a blog, is another important stylistic decision to improve readability. The key here is to rely heavily on whitespace. Why? Eye strain and fatigue is a very real experience to the viewers of a website. When designing, you want to keep the users of your site engaged, and on your site for as long as possible. Minimizing fatigue is an easy way to do this. I drew much of my layout from delba.dev, who is a developer experience engineer at Vercel.

The layout she chose was excellent for content-driven sites, especially those that utilize link-headings and aside annotations.

Setup

Now, let's get into the code. We will start by spinning up a Next.js app with TailwindCSS styling.

1. Create a new Next.JS App

There are a couple of ways to do this, which you can find here.

terminal

yarn create next-app

Follow the prompts to generate the following directory structure (I added eslint and typescript support).

├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
├── .eslintrc.json
├── .gitignore
├── .next
└── yarn.lock

2. Initialize TailwindCSS Configuration

Running this command will generate tailwind.config.js and postcss.config.js for configuring tailwind.

terminal

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Add your components

Edit the tailwind.config.js file and add the directories where you will have your .tsx files.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./ui/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};