Getting Started with Next.JS
The Next.js frontend framework has been around for only a couple of years, but it is already one of the most popular tools in the React ecosystem.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart-bundling, route prefetching, and more. No requirement for any configuration.
Next.js can help us improve the performance, UX, and SEO of the web app.
Next.js takes inspiration from React, web-pack, and babel. It is a tool for creating web applications and is famous for server-side rendering.
Server-Side Rendering(SSR) & Server-Side Generation(SSG) with NEXT.JS
Next.js became popular because it solved a problem that many web developers used to have with web applications rendered on the client-side (in the browser).
The Single Page Applications (SPAs) do not require reloading from the user and provide additional interactivity. SPAs help with improving UX.
Next.js took away all the heavy lifting so you could dedicate your time to the business logic of your application.
Next.js can also help you with static site generation (SSG) — another SEO-friendly way of building websites and applications. In this case, rather than during runtime, your HTML generation takes place during build time. When a page is requested, the user receives a pre-made static HTML page. A website like this is quite fast, but it’s not quite as suitable as SSR for interactive web applications that take a lot of user input because it needs rebuilding for every new request. As a result, it’s a better choice for simple applications (such as blogs) in which the content type doesn’t change based on the user’s actions.
Other Advantages of Next.JS
Next.js also provides some other advantages over basic react web-app:
- An intuitive page-based routing system (with support for dynamic routes).
- Automatic code splitting for faster page loads.
- Client-side routing with optimized pre-fetching.
- Built-in CSS and Sass support and support for any CSS-in-JS library.
- Development environment with Fast Refresh support.
- API routes to build API endpoints with Server-less Functions.
- Fully extendable.
Creating your First Next.JS Web-App
- npm/yarn (npm is auto-installed with NodeJS)
(for yarn-: run the given command in your terminal-:
``` npm install — global yarn ```
2- Create a new next-app:
- cd (path to the folder where you want to create project)
- npx create-next-app project-name
3- Navigating to Project folder:
- cd project-name
Project Structure of Next.JS
pages -: This is the most salient feature of Next.JS for creating new pages. We need folders inside the pages folder and inside those folders we have index.js.
Path is like: pages/page1/index.jsx
It will create a unique path automatically without having to manually declare routers.
For example, the page1 folder will make a path /page1, i.e. (An additional page without having to set up the routes manually.)
styles: This folder contains the style sheets to be applied/available globally.
Best Way to understand Next.JS quickly is to go through the docs.
Here is reference documentation to get you started with your projects.
Link to Next Docs: https://nextjs.org/docs
This is just sort of an intro to Next.JS, there is much more to explore.
Till then, Happy Learning.
To connect with GDSC follow social accounts and never miss an update :
Discord Invite: https://discord.gg/CSCh8gzA
WhatsApp Group: https://chat.whatsapp.com/Fr7i8d3JAy7GepHvMP1rtS
To get featured on GDSC’s Medium Page, send an email at: email@example.com
Connect with me on:
and let’s have some geeky talks.