This post was originally published on ByRayRay.Dev
I didn't use any framework like Angular or React. It was just HTML, CSS, and a bit of jQuery. Also, no CSS pre-processor that could help me. Well, at that time, they exist, but I didn't know that.
In the current time, we have a lot of tools at our disposal. Frameworks like React and VueJS gave us a fantastic toolbox to build websites a lot faster.
Currently, I don't use PHP anymore. Thank God! Because It made me configure my computer with Apache and MySQL (or any other database).
No! Currently, we have it so much better, in my opinion, when building websites. We can pull data from all kinds of APIs and show it excellently on our website.
I know, 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!
That's why NextJS is a smart choice to bet in for building websites. You maybe ask why? I will tell you.
- NextJS is built on top of React
- It has a great toolbox of plugins
- You can load data on the server-side
- Pulling data why a user wants it is no problem with Ajax
- You can load content from Markdown, MDX, JSON, API's, Yaml, GraphQL, and so much more data sources and CMS platforms
- It has build-in TypeScript support
- Great image optimization build in
- Good if you value performance and SEO
- Big amount of documentation and getting started tutorial
If you are not convinced yet, please check out some other static site generators. There is a ton available. Check the website of Jamstack.org/generators.
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 what you need in your knowledge toolbox to make the process easy when you build a website with NextJS.
- It will be nice if you know React. NextJS is built on top of it.
- There is no pre-defined way of writing your styling. You can bring any flavor of pre-processor or any CSS framework you want.
You should have NodeJS and Git installed on your computer. If you don't have NodeJS, download the installer is the easiest way.
If you want to most practical way? Use NVM.
It's as simple as running this command in your terminal.
First, it will ask you the question "What is your project named?" so 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 be something like this.
index.js is your homepage. The
_app.js is the wrapper for all page components. Here you can add all kinds of global styling.
npm run dev and open your browser on
localhost:3000. Now you can see your new NextJS website.
If you want to get content from Markdown files, API, or a CMS. Then I recommend checking out all the starter projects from NextJS.
Running it locally is cool, but eventually, you want to show it to the world.
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.
netlify.toml file and copy this code in it.
[build] command = "npm run build" publish = "out"
With this code, you tell Netlify which command your build command is and in which folder it needs to serve that build version.
Login to 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
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, 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!
Hopefully, this has helped you publish your first NextJS website. If you have any questions or feedback? Please let me know in the comments. 😁
Happy coding 🚀