{"id":316504,"date":"2020-07-09T07:52:06","date_gmt":"2020-07-09T14:52:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=316504"},"modified":"2022-01-14T16:21:52","modified_gmt":"2022-01-15T00:21:52","slug":"building-a-blog-with-next-js","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/building-a-blog-with-next-js\/","title":{"rendered":"Building a Blog with Next.js"},"content":{"rendered":"\n

In this article, we will use Next.js<\/a> to build a static blog framework with the design and structure inspired by Jekyll<\/a>. I’ve always been a big fan of how Jekyll makes it easier for beginners to setup a blog and at the same time also provides a great degree of control over every aspect of the blog for the advanced users.<\/p>\n\n\n\n

With the introduction of Next.js in recent years, combined with the popularity of React, there is a new avenue to explore for static blogs. Next.js makes it super easy to build static websites based on the file system itself with little to no configuration required.<\/p>\n\n\n\n\n\n\n\n

The directory structure of a typical bare-bones Jekyll blog looks like this:<\/p>\n\n\n\n

.\n\u251c\u2500\u2500\u2500 _posts\/ \u00a0 \u00a0 \u00a0 \u00a0 \u00a0...blog posts in markdown\n\u251c\u2500\u2500\u2500 _layouts\/ \u00a0 \u00a0 \u00a0 \u00a0...layouts for different pages\n\u251c\u2500\u2500\u2500 _includes\/ \u00a0 \u00a0 \u00a0 ...re-usable components\n\u251c\u2500\u2500\u2500 index.md \u00a0 \u00a0 \u00a0 \u00a0 ...homepage\n\u2514\u2500\u2500\u2500 config.yml \u00a0 \u00a0 \u00a0 ...blog config<\/code><\/pre>\n\n\n\n
The idea is to design our framework around this directory structure as much as possible so that it becomes easier to  migrate a blog from Jekyll by simply reusing the posts and configs defined in the blog.<\/p>\n\n\n\n
For those unfamiliar with Jekyll, it is a static site generator that can transform your plain text into static websites and blogs. Refer the quick start guide<\/a> to get up and running with Jekyll.

This article also assumes that you have a basic knowledge of React. If not, React\u2019s getting started<\/a> page is a good place to start.<\/p>\n\n\n
Installation<\/h3>\n\n\n
Next.js is powered by React<\/a> and written in Node.js<\/a>. So we need to install npm<\/a> first, before adding next<\/code>, react<\/code> and react-dom<\/code> to the project.<\/p>\n\n\n\n
mkdir nextjs-blog && cd $_\nnpm init -y\nnpm install next react react-dom --save<\/code><\/pre>\n\n\n\n
To run Next.js scripts on the command line, we have to add the next<\/code> command to the scripts<\/code> section of our package.json<\/code>.<\/p>\n\n\n\n
\"scripts\": {\n\u00a0 \"dev\": \"next\"\n}<\/code><\/pre>\n\n\n\n
We can now run npm run dev<\/code> on the command line for the first time. Let’s see what happens.<\/p>\n\n\n\n
$ npm run dev\n> nextjs-blog@1.0.0 dev \/~user\/nextjs-blog\n> next\n\nready - started server on http:\/\/localhost:3000\nError: > Couldn't find a `pages` directory. Please create one under the project root<\/code><\/pre>\n\n\n\n
The compiler is complaining about a missing pages directory in the root of the project. We\u2019ll learn about the concept of pages in the next section.<\/p>\n\n\n
Concept of pages<\/h3>\n\n\n
Next.js is built around the concept of pages. Each page is a React component that can be of type .js<\/code> or .jsx<\/code> which is mapped to a route based on the filename. For example:<\/p>\n\n\n\n
File \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Route\n---- \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0-----\n\/pages\/about.js \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/about\n\/pages\/projects\/work1.js \u00a0 \u00a0 \u00a0 \u00a0\/projects\/work1\n\/pages\/index.js \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/<\/code><\/pre>\n\n\n\n
Let\u2019s create the pages<\/code> directory in the root of the project and populate our first page, index.js<\/code>, with a basic React component.<\/p>\n\n\n\n
\/\/ pages\/index.js\nexport default function Blog() {\n\u00a0 return <div>Welcome to the Next.js blog<\/div>\n}<\/code><\/pre>\n\n\n\n
Run npm run dev<\/code> once again to start the server and navigate to http:\/\/localhost:3000<\/code> in the browser to view your blog for the first time.<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
Out of the box, we get:<\/p>\n\n\n\n