Next JS File Conventions: default.js

Default.js is a very important file in Next.js projects, serving as a default entry point of the project. Also, while using Next.js, sometimes you soft navigate (move between pages without fully reloading the page). In that case, Next.js keeps track of the pages you were on. However, In case of hard navigation (fully reloading the page), such as clicking a link or refreshing the browser, Next.js can’t remember where you were. In this scenario, Next.js serves as a default page created by you.

Prerequisites:

• Next.JS Basics

Steps to Create a Default Page:

Step 1: Create a next-app by running the following command and enter into the created directory by running the following commands.

npx create-next-app my-app
cd my-app

Note: While creating a Next.js app you will be asked for configurational details. Make sure that you use the app-router there.

Folder Structure:

project structure

Updated Dependencies: There is no update in the dependencies.

Example 1: Here is the code for the usage of Default.js page in Next.js

Javascript

// app/default.js

import React from 'react'

const DefaultPage = () => {
    return (
        <div className='w-full p-12 h-[100vh] bg-blue-400'>
            <p className='text-gray-100 font-bold tracking-wider'>
                Next.js
            </p>
            <p className='mt-6 font-light
                          text-sm bg-white 
                          p-6 rounded-md'>
                I am the 
                <span className='text-blue-500 font-bold'>
                    Next.js Default Page
                </span>.
            </p>
            <p className='text-xs mt-4 p-6 
                          bg-gray-100 font-light 
                          rounded-md shadow-md'>
                Default.js is a very important file in Next.js
                projects, serving as a default entry point 
                of the project. Also, while using Next.js, 
                sometimes you soft navigate 
                (move between pages without fully reloading the page). 
                In that case, Next.js keeps track of the pages 
                you were on. However, In case of hard 
                navigation (fully reloading the page), 
                such as clicking a link or refreshing the browser, 
                Next.js can't remember where you were. In this
                scenario, Next.js serves as a default page 
                created by you.
            </p>
        </div>
    )
}
export default DefaultPage

Run the following command to start the App:

npm run dev

Output:

Example 2: Here is another example of Next.js default.js page.

Javascript

// app/default.js

import React from 'react';

const DefaultPage = () => {
    return (
        <div className="flex items-center justify-center 
                        min-h-screen bg-gradient-to-r 
                        from-red-200 to-pink-600">
            <div className="bg-white rounded-lg 
                            shadow-lg p-8 max-w-md w-full">
                <h1 className="text-3xl font-bold 
                               text-gray-800 mb-4">
                    Welcome to Next.js
                </h1>
                <div className="text-gray-700">
                    <p className="mb-4">
                        You've reached the default page of Next.js.
                    </p>
                    <p className="mb-4">
                        Default.js is a very important file in 
                        Next.js projects, serving as a default
                        entry point of the project. Also, 
                        while using Next.js, sometimes you soft 
                        navigate (move between pages without fully
                        reloading the page). In that case, Next.js 
                        keeps track of the pages you were on. 
                        However, In case of hard navigation 
                        (fully reloading the page), 
                        such as clicking a link or refreshing the 
                        browser, Next.js can't remember where you
                        were. In this scenario, Next.js serves as a
                        default page created by you.
                    </p>
                </div>
                <p className="text-gray-600 text-sm mt-4">
                    @GeeksforGeeks ❤️
                </p>
            </div>
        </div>
    );
};

export default DefaultPage;

To run the app, execute the following command:

npm run dev

Output: