Concept of zero-config in Next.js

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!