From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Implementing loading component

Implementing loading component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Implementing loading component

“

Let's implement the loading page in the application now. Just like the error page and not found page, where we simply created a file with a fixed naming convention, and Next.js automatically configured the components. Similarly, to configure a loading component, we just have to create a file named loading.js. And next.js will make sure that it will be rendered while content is being loaded. So let's create the loading.js file in the app folder. And inside, let's create a component by saying export default function loading. And I'll return the JSX. And let me define an h1 with the text loading and a paragraph with the text fetching the requested data. Let's save this. Now the loading component is good to go. But if we check the output, then it cannot be seen properly here, because the data is fetched quickly at the moment. So let's go to the fetch method, and we'll add a delay here. Since we have the provision of having asynchronous components, I can return a promise with set timeout…

Contents