Hello my fellow Coders! :3
In these past few years the amount of a web developer increase. Many developer with different skills and preference, that’s why nowaday there are so many way to build website, whether building the web using vanila (HTML, CSS, JS), PHP based, or even JS/TS based. So based on those three example of material to build a website, which one you Coders prefer? If you ask me, I personally prefer to build a website that JS/TS based and use NextJS as the framework I know you Coders must be repeatedly ask, why I choose JS based? and why I use NextJS?
Reasons Building Web Using JavaScript or TypeScript
There are few reasons why I choose JavaScript and TypeScript, but mostly the reason is that JavaScript is Universal Programming Language. Why is it universal? JavaScript runs everywhere, it is a full-stack language. It can be use to build both frontend and backend, it can run on web browsers, servers, mobile apps, desktop apps, game development, IoT, even AI and machine learning. JavaScript is everywhere, it one of the most functional language. But I know apart from the unperfectness because the maker is crazy enough to built JavaScript in just ten days. At first, it was the most awful, broken, and mad language but now.. JavaScript is everything, it even have the manual-clutch version.. the TypeScript of course, the one with so much annoying strict rules. Well it structured, of course.
Second reason I build website using JavaScript and TypeScript is that I wanna learn more about web development and I don’t want to stuck with Vanila or PHP. I hate PHP (It’s slow, fucking slow. I hate it, it looks old too.). The third reason why I use JS and TS is that those two language is complicated.. and I like to challenge myself with complicated things. The another reasons is mostly bit technical, likes how rich and modern the tools and environment of JS, how optimize the performance is, and I like the asynchronous programming. All of that benefit I get from using JS and TS, it can be more perfect since I use NextJS as the framwork. Wait wait.. I talk much about JS, TS and NextJS, but did you Coders know what NextJS is?
NextJS
Next.js is a React framework that enables server-side rendering (SSR), static site generation (SSG), and full-stack capabilities for building fast, scalable, and SEO-friendly web applications. It simplifies routing, API handling, and performance optimization while integrating seamlessly with React.
Reasons Using NextJS as A Framework For JS Based Website
There are few reasons why I use NextJS for my framework. First reason is that NextJS is a fullstack framework, you can build fullstack web app. Second reason is NextJS easy to use (if you understand JavaScript of course). Next reason is NextJS supports SSR/ISR and Client Side rendering. NextJS is knonwn for the SEO-Friendly charasteristic too. The most important is, NextJS is easy to build especially when you use vercel and it’s cool to use NextJS
Then should we start making web app project using NextJS now? Let’s go!
Start New Project Using NextJS
Requirements:
- NodeJS
Just that, and we good to go!
To make a new NextJS project you can simply run these command:
npx create-next-app@latest my-project --eslint
You can change the ‘my-project’ into anything you want (it just the folder name).
Next for every choice of the tools:
Ok to proceed? (y) #y
? Would you like to use TypeScript? › No / Yes #No, since we just started. We start from easy first
? Would you like to use Tailwind CSS? › No / Yes #Yes, I suggest use TailwindCSS for easier styling
? Would you like your code inside a `src/` directory? › No / Yes #Yes
? Would you like to use App Router? (recommended) › No / Yes #Yes, the App Router is the newer version of router in NextJS
? Would you like to use Turbopack for `next dev`? › No / Yes #Yes
? Would you like to customize the import alias (`@/*` by default)? › No / Yes #No, default is better
After that, wait for the installation. After the installation succeed you go to your directory.
cd my-project
If you want to start your development server you can use:
npm run dev
The terminal will give you the localhost url to see the local development server. Usually it’s localhost:3000.
That’s all from me, I will continue our journey with NextJS at next article. See you!
If you want to learn more yourself, you can visit the Next.js documentation.
This article written by Rejaka Abimanyu Susanto, a Full-Stack Developer that reside in Yogyakarta, Indonesia. If you want to know more about me you can visit me at rejaka.me.