DEV Community 👩‍💻👨‍💻

Cover image for A quick start with Next.js
Ahmedammarr
Ahmedammarr

Posted on

A quick start with Next.js

Next is a react framework for server-side rendering and generating static websites to React-based web applications.
It requires zero configurations and it provides a common structure that makes you able to build frontend react apps while handles server-side for you
Next had been developed by a Vercel team and it trusted by big famous platforms such as TikTok, Twitch, Netflix, and many more check out the official websites' showcase page

It's worth the popularity because of it's great development experience and features that we are going to mention some of them
in the post:

1-Page based routing system with the support of dynamic routing

In the file structure created by create-next-app there is a top-level directory with the name pages each file in this directory is actually a route or in other words, it's automatically available as a route.
So, if you have a file named post.js in the pages directory with simple configurations you can have a route to that component and link to it using the <Link> component provided by next

2-Hot code reloading(Fast refresh)

Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components.
Click here for more explanation

3-Automatic code splitting

Next.js Automatically breaks up your app and renders the pages with only the packages and JavaScript they need.
This ensures the first-page load is as fast as it can be
and can result in loading and better performance.

4-Pre-rendering

Next.js supports two types of pre-rendering, Static Generation and Server-side rendering
The Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
and it's recommended for cases that have no frequent data updates like blog posts, Ecommerce listings, documentation, etc... because it's faster than Server-Side rendering.

But if your app has frequent data updates you need Server-side rendering where the HTML is generated on each request
check the images below for a visual explanation

https://nextjs.org/learn/
https://nextjs.org/learn/

5-Typescript support

Next is written in Typescript and of course, it comes with excellent support for it.

To get started with Next.js visit this tutorial page on the official Next.js Website.

Thank you for your time. Feel free to like, comment, or share this post with your friends

Top comments (2)

Collapse
 
madza profile image
Madza • Edited on

I see a great future for NextJS and love to work with it 😉
Same for Svelte and it's Svelte-kit (as Sapper will not be maintained anymore as I read in their blog a month ago) 😉

Collapse
 
ahmeddammarr profile image
Ahmedammarr Author

yes, NextJs is an amazing and promising framework, what I like the most is the ease of integration also, the documentation is so helpful and creative.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!