Skip to main content

How to Setup and Install Next.js App?

In this article, we will discuss "How to Setup and Install Next.js App" from scratch.





What is React.js and Next.js?





"React.js" is a JavaScript library for building user interfaces (elements that users see and interacting on-screen). Basically, React provide us some helpful functions to build UI, and leaves it on us where to use those functions in the application.





"Next.js" is a React framework. It is maintained by "Vercel". Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience.





Why we use Next.js?





Next.js comes with the some additional features to solve come application requirements such as:






  • We can build SSG (Static Site Generation), SSR (Server-Side Rendering) and SPA (Single Page Application) apps.




  • Hot code Reloading: Reload the page when it detects any change saved.




  • Routing: No need to configure any route. Files put in the pages folder, create the automatic routing.




  • Ecosystem Compatibility: Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.




  • Prefetching: The Link component, used to link together different pages, supports a prefetch prop which automatically prefetches page resources.




  • Dynamic Components: You can import JavaScript modules and React Components dynamically.




  • Static Exports: Using the next export command, Next.js allows you to export a fully static site from your app.




  • TypeScript Support: Next.js is written in TypeScript and as such comes with an excellent TypeScript support.




  • Automatic code splitting: Next.js, basically can do a code splitting itself, where the framework will split the code so that every page will only load required CSS and JavaScript. User can experience faster page loading.




  • API integrated: You can also make API in the same project as your web project.





Create Next.js Project





First, we create a new Next.js Project using following command:





npx create-next-app next-13




When we execute this command, then some questions asked on the Terminal such as: Use TypeScript, EsLint, Src directory and app directory.





Next Js 13 Setup




As per the Next.js new version 13 some changes in folder structure seen. Such as app directory instead of pages, Layouts and many more. We will discuss those in details in my next articles.





Next Js 13 Folder Structure
Next Js 13 Folder Structure




Let's run the application using following command:





npm run dev




Next Js 13




Understanding of App Directory structure





In the app directory, we use folders to define routes, and the files inside these folders are used to define the UI. There are also special files like:






  • head.tsx - This file specifies the head tag for the route segment it's defined in.




  • page.tsx - The file used to create the UI for a particular route.




  • layout.tsx - It contains the layout definition of the route and is shareable across multiple pages. They are perfect for navigation menus and sidebars. On navigation, layouts preserve state and don’t re-render. This means that when you navigate between pages that share a layout, the state remains the same.




  • error.tsx - This file is used to handle errors in the application. It wraps a route with the React error boundary class such that when an error occurs in that route or its children it attempts to recover from it by rendering a user-friendly error page.




  • loading.tsx - The loading UI is instantly loaded from the server as the route UI loads in the background. The loading UI can be a spinner or a skeleton screen. Once the route content loads, it replaces the loading UI.




  • template.tsx is similar to the layout.tsx file, but upon navigation, a new instance of the component is mounted and the state is not preserved. Using layouts and templates allows us to take advantage of a concept known as partial rendering. While moving between routes inside of the same folder, only the layouts and pages inside of that folder are fetched and rendered:





The app directory is still an experimental feature so we need to add the flag in the "next.config.js" file as following:





 experimental: 
 appDir: true,
 ,




No need to perform this action if you are selecting app directory at the time of project installation.





Conclusion





In this article, we are discussing "How to Setup and Install Next.js App". I tired to explain the basic structure and setup a Next.js project. I hope, you like this article and learn a lot. We will discuss more on Next.js in coming articles. Please feel free to add comments if any queries or suggestions.





Keep learning and stay safe :)

Comments

Post a Comment

Popular posts from this blog

Basic Use of Model Factories in Laravel

In this article, we will discuss the basic use of Model Factories in Laravel. Laravel comes with the feature called model factories that are offered to made fake models quickly. It’s used in the database testing and database seeding. Let’s start the discussion on this feature by... Read out the full post at here
Post a Comment
Read more

How to Manage Elastic IP in AWS?

In this article, we will discuss "How to Manage Elastic IP in AWS?" . Here, you will learn the use of Elastic IP addresses and how to assign it to your EC2 Instance. If you are new with EC2 Instance then check out my previous article, "How to setup an EC2 Instance on AWS" . EC2 (Amazon Elastic Compute Cloud) provide us an ability to create, start, stop and terminate the instance at any time. This will creates a challenge with IP addresses, because restarting an instance or replacing a terminated instance with newly created instance, will result in a new IP address. Now the question is "How to reference a machine when the IP is constantly change?" . We can handle this situation with the use of Elastic IP address. We can associate a single Elastic IP address to different Ec2 Instances. You can immediately associate a new Ec2 Instance with the Elastic IP address if the EC2 instance is stopped or terminated. After the back-end EC2 instance changes, our exist...
Post a Comment
Read more

How to use trackBy in Angular with Example

In this article, we will discuss "How to use trackBy in Angular" . Basically, " trackBy " is used to improve the performance of an angular application. Today, I will try to explain the use of trackBy with an example. Why do we need trackBy in Angular? By default, no need to use trackBy in Angular. But with large collections of data, angular ngFor directive may perform poorly. For example, a small change of data such as adding a new record, editing, or deleting a record from the collection. The angular framework will remove all the DOM elements that are associated with the data and will create them again in the DOM tree even if the same data is coming. Here, a lot of DOM manipulation will happen in the background if a large amount of data comes from the API then the application performance will suffer. Angular trackBy example Angular provides us function trackBy which helps us to track the items which have been added or deleted. The trackBy function takes two argum...
Post a Comment
Read more