File Conventions in Next.js
Last Updated :
04 Apr, 2024
NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well and back-end. It comes with a powerful set of features to simplify the development of React applications. One of its features is the File Convention.
In this article, we will learn about the different different file conventions provided by next.js.
NextJS File Conventions
NextJS provides a file structure convention that simplifies the development process of your applications. These file conventions help you to handle errors and define the structure of your application. It provides default.js, error.js, not-found.js, layout.js, loading.js, page.js, route.js, middleware.js, etc. to manage your applications easily.
default.js
default.js file is a fallback page that is rendered when NextJS cannot determine which page to render. It happens when a user refreshes the page or navigates to a URL that does not match any of the defined routes. It is a React component or a function that returns a React component.
error.js
error.js file defines an error UI boundary for a route segment. It is useful for catching unexpected errors that occur in Server Components and Client Components and displaying a fallback UI.
layout.js
layout.js is a React component that is shared between multiple pages in an application. It allows us to define a common structure and a same appearance for a group of pages. It should accept and use a children prop. During rendering, children will be populated with the route segments the layout is wrapping.
loading.js
loading.js file is typically designed to be displayed during page transitions when content is being fetched from the server. If the content is already present in cache memory, such as when a user revisits a page they’ve previously loaded, the loader may not be displayed since there is no need to fetch data from the server.
middleware.js
middleware.js that has access to request, response objects and the next middleware function. It allows you to intercept and manipulate requests and responses before they reach route handlers.
not-found.js
not-found.js file renders a custom user interface (UI) when the notFound function is called within a route segment. When user enters a wrong route path, this not-found.js file will be automatically displayed.
page.js
page.js is a react component that is used to create a UI for each routes within specific route directory.
Steps to Create NextJS Application:
Step 1: Create a NextJS application using the following command.
npx create-next-app@latest gfg
Step 2: It will ask you some questions, so choose as the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: After creating your project folder i.e. gfg, move to it using the following command.
cd gfg
Project Structure:
Example: The below example demonstrates the use not-found.js, page.js, layout.js File Conventions in Next.js.
src/app/page.js
JavaScript
//File path: src/app/page.js
export default function Home() {
return (
<>
<h1>Home Page</h1>
</>
);
}
//File path: src/app/layout.js
'use client';
import { useRouter } from "next/navigation";
export default function RootLayout({ children }) {
const router = useRouter();
return (
<html lang="en">
<body>
<h1 style={{color:'green'}}>GeeksForGeeks | Next.js File Conventions </h1>
<ul>
<li style={{cursor:'pointer'}}
onClick={()=>router.push('/')}>Home</li>
<li style={{cursor:'pointer'}}
onClick={()=>router.push('/about')}>About</li>
<li style={{cursor:'pointer'}}
onClick={()=>router.push('/profile')}>Profile</li>
</ul>
<hr />
{children}
</body>
</html>
);
}
//File path: src/app/not-found.js
export default function Page() {
return (
<>
<h1>This page Does not exist</h1>
<p>If a specific route is not created, Next.js will automatically serve the `not-found.js` file.</p>
</>
);
}
//File path: src/app/about/page.js
export default function Page() {
return (
<>
<h1>About Page</h1>
</>
);
}
Start your application using the command:
npm run dev
Output:
Share your thoughts in the comments
Please Login to comment...