Getting started

Introduction

Hello all of you who are here with me!

In this project we will be building complete Next.js blog website. The content of this page we will be storing in plain markdown files. For those who are asking themselves: Is this how this blog was created? - Yes, that''s exactly how this blog was made (at least at the time of writing these articles), so we might say that we are going to build a clone of this website.

Why Next.js?

Next.js is a powerful framework, build on top of React.

React is the JavaScript library which I am using at work and which I was also using before my professional career has started. It is easy to learn and very powerful.

Next.js is a framework which provides a layer of abstraction for things which are common when building websites, like it provides an easy-to-use routing system based on files and folders structure, so the developer doesn't have to do everything himself.

Why store content in Markdown?

The short answer is: for simplicity. For such a simple website as a personal blog/portfolio page it would be too much to set up any backend API with database access to just store some articles' data.

The second thing is that markdown is a powerful tool. It allows you to provide different formatting along with the text like headings, lists, code blocks etc. I personally am using Markdown for a very long time, basically for any kind of notes I'm making and I know this is a simple and bulletproof solution.

Getting started

So after this few words of introduction, we can begin building our project.

Throughout this whole course, I will be using Yarn instead of NPM, but if you prefer any other package manager than Yarn, please adjust any CLI command where necessary.

Create-next-app

We begin by using the npx cli command. Run it in the terminal in the directory you want this project to be stored on your computer.

When running this command we are asked few questions which I answered as follows:

After filling this in, all the packages are going to be installed and we are ready to start working.

We are not going to use Tailwind here for styling, instead I prefer to build styles using SASS.

We are going to use TS and ESLint, as this are taking care first of type safety in your project, second of consistency and quality of your code.

So, now we can open our newly created project in our favorite text editor (in my case VS Code). And the first thing I'm going to do is delete the and and run in the terminal to reinstall dependencies using Yarn.

Prepare GitHub repository

For the sake of keeping track of the changes we are making, I will be using git (which is already set up for you after initializing this project), but I also want to keep the project in a remote repository which I can access from any place and which I can in this case share publicly for you to use.

I'm not going to walk you through this process, as it is pretty straight forward and there are already plenty of other sources explaining how to create a repository on GitHub.

So I created the repository called on my GitHub account (here is the repository page on GitHub), and now we need to add is as a remote repository to our project. To do so we run this command in terminal:

We are not going to push anything just yet. Let's first do some last changes before we do our first, initial commit.

Update files before initial commit

Update

First let's go to and do some changes here. We want to make our project public, and we want to add an open license to the project. Also, I think we can change the version as we are going to add suffix to the versions in development, and only remove this suffix when we do the release.

This is an updated file:

Files clean-up

We also want to clean up all the example files which came with the Next.js installation, so we have an empty project to start working with.

1. First let's delete
2. In the we remove all the imports, and we only return a with text "Home"

3. We rename to as we are going to use SASS as mentioned earlier and we simply delete everything from there, leaving an empty file
4. In the we only leave the style sheet import, and the metadata type import. We also update the to something simple for now. The JSX in the return statement stays pretty much the same, we just wrap the children in a tag.

Test if it works

Now when we have our project cleaned up, we can spin it up and see how it looks. To do so we use command in our terminal.

If we now open the browser on we should see our empty page with just "Home" printed on the screen, but instead we get en error.

Why do we get it? Well, the message of the error describe accurately what happens. By default, Next.js doesn't support SASS, we need to add a dependency to handle this for us. To do so we run the command suggested in the error message, so . I added here the flag to install this package as a development dependency, as it is only needed to transpile SASS to CSS, and it does not have to be included in production code.

Now if we restart the development server we can see in the browser our beautiful home page.

Time to make the initial commit

Having all these changes we can now make our initial commit and push everything to the repository.

The first commit we are going to push directly to master, but from now on I am going to create branches for new features and open pull requests. This is maybe an overkill for such a simple project, but this is a good habit in my opinion and this is the way things are done in projects where you build software with other people.

We add this parameter to the command each time we want to push any new branch to our remote repository on GitHub we set up earlier. From now on this setting is saved, and we are going to simply use to push changes to the .

And that's all for now. We set all the basics to be able to start working on our new project. I hope you enjoyed this part, and you are excited to move forward as much as I am.

Let me invite you to the next part - Linting and formatting.