Building Websites in 2010

When I started with front-end development, I used only HTML, CSS, and JavaScript. Since the back-end developers in my team needed to connect it to the CMS at the time, I was building it into PHP files.

I didn’t use any framework like Angular or React. It was just HTML, CSS, and a bit of jQuery. Also, there was no CSS pre-processor that could help me. Well, they existed, but I didn’t know that.

This story was originally published on ByRayRay.dev

Building Websites in 2020

Nowadays, we have a lot of tools at our disposal. Frameworks like React and Vue.js give us a fantastic toolbox to build websites a lot faster.

Currently, I don’t use PHP anymore because it made me configure my computer with Apache and MySQL (or any other database).

In my opinion, we have it so much better now when it comes to building websites. We can pull data from all kinds of APIs and show it excellently on our website.

Why Next.js Is a Smart Choice

I know, there are so many choices to make right now. What are you going to use as a platform to build your website? Which framework or static site generator are you going to use?

There are so many tools available!

I will always bet on JavaScript! It’s my #1 language to use in web development — both front-end and back-end.

That’s why Next.js is a smart choice to bet on for building websites. You might ask, “Why?” I will tell you.

1. Next is built on top of React.
2. It has a great toolbox of plugins.
3. You can load data on the server side.
4. Pulling data when a user wants it is no problem with Ajax.
5. React is one of the most straightforward libraries to work with when you’ve just learned JavaScript.
6. You can load content from Markdown, MDX, JSON, APIs, YAML, GraphQL, and so many more data sources and CMS platforms.
7. It has built-in TypeScript support.
8. Great built-in image optimization.
9. Good if you value performance and SEO.
10. A large amount of documentation and a Getting Started tutorial.

If you are not convinced yet, please check out some other static site generators. There are a ton available.

When You Should Pick Next.js

It’s good to think about what you want to build before you start coding. This can help to smooth your development process. But it’s also good to know what you need in your knowledge toolbox to make the process easy when building a website with Next.

1. You should be familiar with JavaScript! If you don’t know JavaScript, this would not be a smart choice. Learn JavaScript first before diving into any JavaScript framework or library.
2. It would be nice if you know React as well. Next is built on top of it.
3. There is no pre-defined way of writing your styling. You can bring any flavor of pre-processor or any CSS framework you want.
4. You should know HTML and CSS. If you don’t know them, please don’t start with JavaScript. You are probably going to have a tough time building something with Next.

How to Build a Website With Next.js

1. Installation

You should have Node.js and Git installed on your computer. If you don’t have Node, downloading the installer is the easiest way.

2. Create a project

It’s as simple as running this command in your terminal:

npx create-next-app

First, it will ask you this question: “What is your project named?” Type in the name of your project and it will generate all the needed files.

In your terminal, go to the directory of your project. The script will show you the folder when it has installed all the dependencies.

When you open this folder via your favorite editor, it should look something like this:

3. Add content and styling

If you check the pages folder, you will see two JavaScript files and one folder.

The index.js is your homepage. The _app.js is the wrapper for all page components. Here, you can add all kinds of global styling.

Run npm run dev and open your browser on localhost:3000. Now you can see your new Next.js website.

If you want to get content from Markdown files, an API, or a CMS, I recommend checking out all the starter projects from Next.

Running it locally is cool, but eventually, you want to show it to the world.

4. Create a GitHub project

Before we can deploy it, create a project and host your code safely there.

We want to host it for free on Netlify. For Netlify, you should add a config file to get your site running in no time.

Create a netlify.toml file and copy this code in it:

[build]
command = "npm run build"
publish = "out"

With this code, you tell Netlify what your build command is and in which folder it needs to serve that build version.

5. Deploy on Netlify for free

Log into Netlify and create a new project based on your GitHub account.

Select the repo your website is in and click next. The next step should be configured for you because of the netlify.toml file.

When everything goes as planned, you should see that there is a deployment running.

When that build and deployment process is finished, you can visit your site by clicking on “Preview deploy.” Now your website is alive and you can share it with the world.

Of course, I recommend spending a reasonable amount of time adding content and styling so it is very pleasing to your visitors’ eyes. I wish you good luck!

Thanks

Hopefully, this has helped you publish your first Next.js website. If you have any questions or feedback, please let me know in the comments.

Happy coding 🚀

Read more

5 Rules to Improve Code Readability
_Code readability is a feature of your application (even if your users don’t see it)_medium.com

Setting Up a Next.js Project With TailWind CSS
_Integrate Tailwind and Next.js today_medium.com

Tips to Create Developer Tutorials
_Want to write more tutorials but you aren’t sure where to start? Start here_medium.com

How to Learn JavaScript The Easy Way?
_1. Start with the theory first!_medium.com