Building a Content Driven Blog with Next.js and Typescript

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 §

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

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.

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.

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

4. Code

Now that everything is setup, you can utilize react components alongside tailwind utility functions to quickly put together the wireframe layout to your site.

Now What? §

Coming up, we need to integrate contentlayer¹ with our site so we can actually host the content that we write. Follow along as we create the type-safe schema for our content.

Inspirations §

Software Engineering and Web Development wouldn't be where it is today without the collaboration and community that exists between engineers. I wouldn't be able to create what I have without the following influences.