Next.js Introduction.

 What is Next.js?

The docs defines next.js as the react framework for production and this line which I want to break down further to help you understand what exactly is next.js

The React Framework for production

React: 

  • If you think about building applications with just react you know that it's not quite possible to build full feature-rich application ready to be deployed to production.
  • React is a library for building user interfaces, it is responsible for only the view layer of an application and you as the developer have to make decisions on other features of the app for example how would implement routing, styling, authentication etc..

Next js

  • Next js on other hand its a react framework so it is a package that uses react for building user interfaces but it also comes loaded with a lot more featured that enable you to build full-fledged production ready applications feature exactly like routing, styling, authentication, bundle optimization etc..
  • There's no need to install additional packages next js provided everything for you.

Next js living true to the name of being a framework does have opinions and conventions which need to be followed to implement the above set features.


Why learn Next.js?

Next js simply the process of building a react application for production let me list down the some note worthy features. you would probably want in a react application which next js provides out of the box.

1. File based routing --when building a react app you need to install a third-party routing package configure it and add code every time you need to create a route next js provide what is known as file based routing to simplify this task.

2. pre-rendering --this means that next js generates html for each page in advance instead of having it all done by client-side JavaScript, pre-rendering can result in better performance and seo which is something we all want.

3. api routes -- And this might be a surprise to most of you but  let me tell you that you can create apis with next js so nextjs is really full stack framework if you think about it. you can write the frontend code in react but write apis that can be called by the react app.

4. support for CSS modules-- next js supports css modules which saves you the time of choosing a css library of course you allowed to use framework like tailwind or even css in js library like style components for example next js supports css modules out of the box.

5. authentication --next js supports multiple authentication patterns each designed for different use cases.

6. dev and prod build system-- and well optimized production build system so that you can focus more on the code and less on the configuration.

Pre-requisites:

  • HTML,CSS and JavaScript Fundamentals.
  • ES6+features
  • React fundamentals


Comments

Post a Comment

Popular posts from this blog

Next.js start with Helloworld.

Image
Lets create our very first next.js application. And let's begin by setting up our development environment. For next.js we need two things installed. Node and text editor of your choice. To create new project we need one line of code in the terminal.  npx create-next-app hello-world Select hello-world folder and in terminal run command as yarn dev or npm run dev -->This command will setup a development environment server on local port 3000. Now we can see hello-world application is up and running by default the ui features a heading that sys welcome to Next.js and few links to the documentation, We can also see the instruction started by editing pages/index.js. lets go VS code and open index.js file under pages and edit the code. After edited the code for displaying the Hello world!!! text. Now we Understand how to generate a next app using next app command.
Read more