Table of contents
1.
Introduction
2.
What is Zero-config in Next.js?
3.
Create Next App
3.1.
Template Explanation 
4.
Frequently Asked Questions
5.
Key takeaway
Last Updated: Mar 27, 2024

Concept of zero-config in Next.js

Author Aditya Kumar
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

With every update Next.js brings out, more optimisations are introduced. Developers have been moving from simple create react apps to the next app, looking at features like server-side rendering, search engine optimisation, and a faster development environment. With Next9, type safety was introduced as a pre-built configuration.

What is Zero-config in Next.js?

Next.js6 introduced @zeit/next-typescript in which users were needed to customise their .babelrc file and use typescript in their project by enabling it in next.config.js This feature did not integrate type checking, which made it another hassle to maintain a separate package to add type checking.

To solve this, next.js 9 introduced an automated setup for typescript; you need to add an extension “.tsx” to the file. Next, js will detect the typescript file and create tsconfig.json, which allows for integrated type checking. Next.js handles type safety in both production and development mode. In production, the next build will fail if any errors are present. In development mode, typed errors will be shown in the browser and console.

Create Next App

We can bootstrap the next app simply by using create next app. It generates a template for us to launch without manipulating any config files. Just write the following command in your command-line interface.

npx create-next-app@latest
# or
yarn create next-app
You can also try this code with Online Javascript Compiler
Run Code


Typescript template can be created using –ts / –typescript flags

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
You can also try this code with Online Javascript Compiler
Run Code

With the above commands, CLI will ask for the project name and you are done setting up the next app.

Use npx or yarn; both will pull the latest version template out of create-next-app.

Template Explanation 

This picture contains the default template provided by create next app. We will understand each of them.

Pages: It contains both server-side APIs (Application Programming Interface) and client-side pages in the form of components. There is no need to define routes as Next follows file-based routing. 

API routes: In Next.js files inside of pages/api is treated as ‘/api/*’ .This is used as an api endpoint.Being a server side bundle, it will be separate from the client side pages.For example, if we hit ‘api/user’ endpoint, response would be a json object with status of “OK”

File : pages/api/user.js 

export default function handler(req,res){
res.status(200).json({name:”Adarsh”})
}
You can also try this code with Online Javascript Compiler
Run Code

_app.js is the one that initializes all the components for the client-side. Every folder for the page is a route in which the index and other pages are defined. We can nest in pages as per my routes like below.

  • pages                          routes     

-  index.js                         / route

- admin.js                        /admin

- index.js

- [ profile ].js                   /admin/:id

import '../styles/globals.css'
/* 
    _app.js file is used to bootstrap all the pages in the 
    client side.
*/
function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}

export default MyApp
You can also try this code with Online Javascript Compiler
Run Code

Public folder:

It contains static assets like pictures, fonts etc. 

Styles: 

This folder contains a globally configured file for CSS and files for styling each of the pages.

Next.config.js:

 It contains configurations for your next app. You can add to it as and when required. It is not included in the browser build file as it gets used by Node.js server.

Package.json, package-lock.json:

This set of files defines our application, versioning, author, and packages that have been installed.

Frequently Asked Questions


1.What is npx?

Ans: It is used to execute the package by looking for package binaries within the local system. While with npm, you need first to install the package to execute it.

2.How can we set up typescript?

Ans: We can set up typescript by providing an extension to file from ‘.js’ to ‘.ts’ or ‘.tsx’ and then detecting Typescript in our project. Then we will add a ‘ts’ config file for any defaults needed in the project. Or we can bootstrap our app using ‘create next app’ as discussed in the article about the concept of zero-config in next.js.

Key takeaway

Congratulations on getting through this article, i.e., the Concept of zero-config in next.js. Now you will set the NEXT app for yourself without manual configuration.

If you want to learn more about next.js, you can check here Introduction to Next.js.

Happy Learning!

Live masterclass