What is Next JS
Next Js is a framework for React Js, which means it's a wrapper on top of React by providing the general features of React with more in addition.
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 pre-fetching, and more. No config needed.
Why the need for Next Js?
To build a complete web application with React from scratch, there are many important details you need to consider:
- Code has to be bundled using a bundler such as a webpack and transformed using a compiler like Babel.
- You need to do production optimizations such as code splitting.
- You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
- You might have to write some server-side code to connect your React app to your data store.
What if we have a framework that can solve all the above problems, that's where Next Js come into the picture, Next Js is a React Framework that provides a solution to all of the above problems.
What is Server-Side Rendering VS Client-Side Rendering?
Client-side rendering manages the routing dynamically without refreshing the page every time a user requests a different route. But server-side rendering is able to display a fully populated page on the first load for any route of the website, whereas client-side rendering displays a blank page first.
Features of Next Js
- An intuitive page based routing system (with support for dynamic routes)
- Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
- Automatic code splitting for faster page loads
- Client-side routing with optimized prefetching
- 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 Serverless Functions
- Fully extendable
Create a Next.js App
To create a Next.js app, open your terminal,
cd into the directory you’d like to create the app in, and run the following command:
cd npx create-next-app my-app-name
Run the development server
You now have a new directory called
cd into it:
Then run the following command:
npm run dev
This starts your Next.js app’s “development server” (more on this later) on port 3000.