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 my-app-name. Let’s cd into it:

cd my-app-name

Then run the following command:

npm run dev

This starts your Next.js app’s “development server” (more on this later) on port 3000.

Happy Coding!

--

--

--

Learning is a never-ending journey be it in college or in life, just enjoy it

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Minimize Result by Adding Parentheses to Expression

Super simple Gulp tutorial for beginners

Part 2 — You Wrote Some JavaScript Code, Now What?

Drawing in React with Canvas

javaScriptIsTheSameAsJava = false; Part 2: Comparisons and Conditionals

Palindrome Number?

Restore IP Addresses

Construct Binary Tree from Preorder and Inorder Traversal

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nazhim Kalam

Nazhim Kalam

Learning is a never-ending journey be it in college or in life, just enjoy it

More from Medium

Netlify. How to deploy React.js or Storybook app.

Dark and Light Mode — Using React & Tailwind CSS

Why Next . Js

Patreon_clone with React