Unraveling the Components of a Next.js App

When I started writing code in React, I didn't bothered to figure out what do the boilerplate and configuration files do. That meant I was writing code that works great but I was still feeling like an imposter. I took me long to get over that. So, while starting to learn Next.js, that was the first learning I did. This blog is part of my current running challenge #30DaysOfNext (follow the challenge @PushkarBorkar).

So, pull up your pants 😁 and type npx create-next-app in your terminal and let's get started.

Overview of the Folder Structure

When you first run the create-next-app command, Next.js builds you a basic boilerplate Next App. Congratulations 🎉 you successfully built your very first Next App 😎. (You can load up localhost:3000 to see it deployed there.)

The file tree for your app will have a /pages folder, /public folder, /styles folder and a bunch of config files. In this post we will discuss each of the folders and config files in detail.

Pages and Components

The first folder you would see is the /pages folder. In Next.js this folder is mapped to routes on the app out of the box. Woah! That means that to add a new route in your app you just have to add a React Component(.js/.ts OR .jsx/.tsx file) in this folder and Next.js will create a route with the name of file. By convention all the files in this folder must follow camel-case naming. Next.js by default pre-renders all the page in the pages folder (Better for SEO 💪), although you can opt which rendering strategy to use to pre-render the components SSR or SSG.
Blog on Rendering Strategy coming soon 🚀

By Default there will be two files, namely index.tsx and _app.tsx and an /api folder added to this folder. These have special meaning attached to them. Let's discuss them one-by-one.

index.js

This files points to the base URL / of your app. This will give you an idea of how a React Component for a URL route must be structured in a Next.js App. Every page component is of type NextPage. So, Everything that you see currently on the localhost:3000 is rendered from here.

_app.js

This is a special component. This file has the App component in it. App Component utilises the <Component/> provided by Next.js to initialise all the pages. Additionally, this App Components can be customised to UI element persistent to the view i.e. visible on every page like a Navbar or a Footer. Also, this is where you will save a state that you want to be consistent on all the pages.

APIs

With Next.js you can serve APIs from the same endpoint as that of you frontend. For adding API paths to the app you will just have to add files with the names that you want of the paths of the API to be. For example, if you want a /posts path for the api then you just need to add a file named posts.ts in the /api folder and Voila! you can fetch data from the localhost:3000/api/posts.

Note: All the apis paths will be in /api/<filename> format.

Routing

Routing is a handled in a very interesting way in Next.js Apps. As discussed above all the files in the pages folder points to separate paths same as the file name. But you can also nest paths by making a folder in the /pages folder and adding files into that folder. For Example if you want to show friends of a user as /user/friends, no problems, just add a /user folder in the /pages folder and add a friends component in the /user folder. It's as simple as that.

There is yet another very interesting topic under routing Dynamic Routing, I will save that for future posts 😁

Note: It is better to keep only the main components in the /pages folder and refractor the helper components into a separate /components folder under the root.

Public

The second folder is the /public folder. This is similar to public folder to React. You can access all the files in this folder straight from the browser by just typing file names after the base URL (go ahead and try accessing the favicon.ico file in the browser). Due to this fact, all the assets that the browser need like the logos and the favicons are stored in this folder. Also due to the same, you must be very careful of what you put in the /public folder.

Styles

The final folder is the /styles folder. As the name suggests this folder contains the styles for the app. You are provided with built in Sass support in Next.js. But there are some conventions that are followed in a Next App for the naming of stylesheets. There are two types of stylesheets in Next.js namely,

• Global Stylesheets: These files are named regularly as <filename>.css. You can only import these files in the _app.tsx component and no other component file.
• Module Stylesheets: These files are for more broader use they can be imported in any component. Naming convention for these is you need to add .module in their name. So the name of these files are in <filename>.module.css format.

Config Files

Apart from these folders there are config files in the file tree. Most of the times you will see the following files:

• .eslintrc.json: Config for ESLint
• next-env.d.ts: This is a file defining various types in next. This file must not be changed
• next.config.js: This is the Next.js Config file.
• tsconfig.json: These are configurations for the Typescript Compiler (by default SWC but if you add .babelrc file then it switches to Babel)
• package.json: This has all the app data and data about npm dependencies.

Out of all these next.config.js and tsconfig.json are the most interesting ones. So, lets discuss them further.

next.config.js

This is the file that has all the Next.js configurations. It is usually a ES5 Module with various config key-value pairs. There are many configuration, but I will discuss a few here,

• headers: you can set custom header for the app in here.
• basePath: you can set a custom base URL using this config.
• reactStrictMode: it is a boolean to toggle the Strict mode on/off
• staticPageGenerationTimeout: This is the time amount in seconds to wait before declaring static render failed. You can read about all the configuration available here.

tsconfig.json

This is the configuration for the Typescript Compiler. I will discuss some frequently used attributes of the config here,

• target: this is the flavour of javascript that the typescript is compiled to.
• noEmit: when false create .d.ts files for each TS file which has only types for the file
• include: which files to include for type checking
• exclude: which files to not bother for type checking. You can check all other available configs here.

So, now you have the foundational idea to how the Next.js App is structured and what does each and every part of the App do. Now we can go about making wonderful Apps with Next.js without feeling like imposters. 😇
I'm learning Next.js for next 30 days straight (#30DaysOfNext), do join me @PushkarBorkar ✌️