//Note: Watch the video here
Dear Next.Js Aficionado,
Until now, we’ve talked about what your portfolio website should look like and that web developers aren’t web designers, so they need ready-to-use templates if they want to create something beautiful.
We analyzed some examples of good portfolio websites and chose an HTML template or UI kit.
Now, it’s time to set up our project.
Hopefully, the guys behind this framework have made it super easy for us to install it and get going.
We just open a new terminal, navigate to the parent folder where we would like to create our project, and we run the following command:
Ok, let’s open the project in our favorite code editor.
As you can see, we have several files and folders in the project folder.
I’m going to review them briefly…
First, we have a
node_modules folder. It’s the home of all the third-party libraries we will install in the future. Every time you install something – let’s say caching library for optimizing the number of requests your app makes to external API – the library files will be downloaded and saved in their folder under
Next, there’s a folder named
It’s the preferred place for all the files we want to be freely accessible.
For security reasons, we want most of our project files not to be freely accessible. But some static ones like images, SVG graphics, fonts, and others are meant to be public, so their proper place is in this folder.
We also have a folder named
Here is the home for all of our CSS files. There’s a globals.css in there. Here we put styles that apply to many components and the app. And, of course, we can create a CSS file for every component we make.
And finally, we have the
Here we put all files that represent individual pages of our website. So our website’s index page is this one. If we open it, we’ll discover a standard react component named Home.
Now, if we run the application for testing purposes with npm run dev…
We can open that page in our browser.
In a later video, we will talk more about how routing happens in Next.js, but it’s simple as that. You create files that represent pages, and they just start working in your browser.
Ok, we’ve talked about the available folders. Let’s review the available files for a minute.
We have a
Let’s install it and start using it instead of npm.
We run the command:
npm install -g yarn. I already have it installed, so nothing changed on my side. But if you didn’t have it on your computer, now it’s available.
We’ll use yarn from now on.
So the yarn.lock file is a special file that we never edit. It’s managed by the package manager, and it holds information about the third-party libraries we’ve installed, their dependencies, and their exact versions.
The idea is that if we want to run our app on a machine different than ours, let’s say on a server; then we’ll copy all app’s files and folders except
Often this folder is huge. It is huge in size and the number of files, so if every project on a platform like GitHub has it around, it will need more storage space.
Because the files there don’t change from project to project, they don’t get uploaded.
Instead, every time we install our app on a new machine, they get downloaded anew.
To download the exact same files, we need a list of them; thus, we have a
Besides it, we have a
packge.json file. It’s something like a human-readable register of all project dependencies. Here we define the project’s name, version, and custom scripts, etc…
If our app is ready to go online, we need to build it, so we run the command:
It starts to bundle the files, minify them, and do its other magic that makes Next.Js such a good React framework.
When it’s finished building, we can start the app just like it will be started in a production environment by running the command:
But while we’re developing our app, we’ll not build it if we want it running.
We’ll use the command:
Now we can make changes, create new files and apply new CSS styles, and everything we do will be visible in the browser right away, thanks to the so-called “hot-reload” feature of Next.js.
It’s a really useful one. But what is it?
“Linting” your code is the automated process of analyzing it for obvious errors that can be detected without running it. Some errors happen only on run time, so no machine can notice them beforehand, but others can be caught just by mechanically applying the language’s rules.
So when you run the command
yarn lint, your code gets analyzed for warnings and errors. Let’s see what happens if there is an error…
I will add an anchor, but I will miss on purpose to properly close the tag.
Then I will run the command…
As you can see, it successfully detected the missing closing tag.
If you’re curious about the rules, you can find them all on this documentation page.
Ok, enough discussing the
It’s a js file that holds configs related to Next.js.
I not gonna tell you what you can put here because you won’t remember it. I don’t remember myself.
Basically, if you need to configure the framework in some specific way, you read the official documentation.
Right now, we don’t need to change anything, so we’ll leave this file unchanged.
.eslintrc.json file is the place to configure ESLint. For example, let’s say you want a style tag in your component. A rule states you can’t put it there, but you can turn it off by adding it right here with a value of “off.”
And finally, we have a
README.md. It’s self explementary what we use it for, so I won’t waste time talking about it. If your repository is not public, perhaps you don’t need such a file.
Ok, that’s it…
It turns out it’s pretty easy to install Next.js and start coding. That’s why I love it and use it for almost every project. In the following video, we will finally begin coding. We’ll take the HTML template we chose earlier and turn it into a Next.Js template.
Let’s wrap up this section:
- We installed Next.Js and the package manager yarn
- We reviewed the project structure – its folders and files
- And we talked about the available scripts in package.json
PS. This tutorial was originally published on buhalbu.com