A quick dive into NextJS app folder

NextJS is an amazing JavaScript framework that helps you build amazing and performant web applications. Recently, they released a new change, and for page components, now it uses the app folder which comes with many different options. In this article, we will cover what this new structure brings.

NextJS logo

Client vs Server components

When using the app folder, NextJS treats all the components as server-side components. That means you can’t use things like window and other browser-specific objects and functions. However, there is a way to make them run client-side, and that is done by adding a “use client” string at the top of your file.

“use client”
 
 // .. rest of the code

Root specific files

global-error.js

You can place this component in the root of the app folder. And if any error occurs during the rendering that is not handled, the output of this component is rendered. All error components need to be client-side components. This component receives two parameters, an error containing details about specific errors, and a reset function that you could use to retry rendering.

"use client" // must be client-side
export default function Error({
                                error…