Skip to content

How to Start a Blog With Next.JS

Next.js/

There are a lot of things to consider when creating a blog with any technology. It’s no different when it comes to Next.js.

You need to think where your content from is going to come from. Is going to be a content management system? Local file storage?

And then there’s styling and hosting, what about all that?

That’s plenty to think of and might overwhelm you. But, don’t worry! In this post I will list a couple of things that will help you better understand the scope of creating a blog.

Picking a Content Source

You can’t call your site a blog without content. You should think about your workflow of bringing a post from nothing to published. That’s where a content management system (CMS) comes in. It organizes the process of making blog posts.

Since you want to create a blog using Next.js, you are not looking for a traditional CMS but a headless one.

A headless CMS serves as your content repository. It gives you the tools to create content and store your blog posts.

Unlike a regular CMS — a monolithic application with backend and frontend clumped together — a headless CMS has no presentation layer. It provides no user interface for your posts.

Not having its own frontend is what makes a headless CMS so versatile. By exposing the content as pure data via REST or GraphQL APIs, you can pick any technology for the frontend you want.

Here’s a list of API driven headless CMS options with Next.js code examples:

You will find a list of related examples that can help you by clicking on any of the examples above.

Git-based Headless CMS

As mentioned before, you can usually fetch your content from a headless CMS via API. But that’s not the only way. You can also keep your content alongside your code base by choosing a CMS that manages your content with Git.

A git-based CMS uses your local file system as the content store. To use the content in Next.js, you have to read the files from the file system.

Here are some git-based CMS options for Next.js:

There are many other headless CMS options you can explore. You will have to research and try yourself to pick the best fit for your needs.

Consider who will be creating the content. Most options target non-developers and might slow you down if you want full control. Just make sure that your choice works great with Next.js.

Using Markdown

If you want complete freedom and avoid using a CMS, you can use Markdown. It is popular among developers for writing content for blogs and documentations.

The magic of Markdown lies in its simplicity. It’s a plaintext file that you can open with your favorite text editor and start producing content.

You have complete control over the content and its formatting.

# You can insert a heading

And a paragraph

- or a list
- of things
- that are related

without ever leaving your keyboard.

You can even add React components inside your Markdown using MDX.

I’ve written a guide on setting up a Next.js blog with Markdown. Although it takes some effort, it is well worth it if you want complete control and versatility over your content.

Rendering Content

Next.js pre-renders the content for every page in your site by generating the HTML on the server. A visitor opening a page on your site receives the complete page immediately. There is no client-side rendering done with JavaScript. This can result in better SEO and performance.

Next.js pre-renders pages using one of two strategies: static site generation (SSG) or server-side rendering (SSR).

Static site generation (SSG)

In the SSG strategy, when you compile and bundle your site for production, Next.js generates HTML for every page. The content is fetched during the build and inserted in the resulting HTML. Your live website doesn’t fetch the content or build the HTML for it. The pages are complete and ready to be served fast.

Server-side rendering (SSR)

With server-side rendering, Next.js regenerates the HTML for the visited page on every request. Use this strategy only if the content can change for every request. Otherwise, it doesn’t make much sense to rebuild the page.

Pick SSG

For a blog, you want to go with static site generation, because the content doesn’t change on every request. It remains static.

Generating every post page during build time means your server doesn’t need to do any work to respond to requests. It’s a matter of simply serving the already available HTML documents to the user.

You can use SSG even if you have some interactive parts on your page, such as likes or comments. Nothing stops you from using client-side JavaScript to fetch extra data.

The team behind Next.js also recommends going with SSG for a blog.

Adding Styling

Since Next.js uses React in the frontend, adding styles to your project is a matter of styling React components.

There are plenty of available options when it comes to styling React components, but it boils down to three categories:

Syntax Highlighting in Code Blocks

If you are planning to run a blog about programming, you are most like going to include code examples in your content.

It is important to pick a CMS that allows you to embed code blocks inside your content easily. Make sure the content can include code and pre elements.

To add syntax highlighting you can use one of the following libraries:

Look for React-specific versions of these libraries to speed up your work.

Hosting

When it comes to choosing a hosting service for your Next.js blog, the go-to options are Vercel and Netlify. These are the best services for hosting a site that uses static site generation.

Vercel is made by the creators of Next.js, so it surely will be a good choice for hosting.

What makes these platforms great, is their ease of use and speed. To deploy your website, all you have to do is give access to your project’s repository. Your website will be deployed any time you push a change to your production branch.

Vercel and Netlify are very fast because they distribute your website over a content delivery network (CDN). That makes your website load blazing fast all around the world.