Custom Not Found & Loading Pages

Custom Not Found & Loading Pages

1. Create a Custom Not Found Page

a. Create the File in the App Folder

• Location: In the root app/ directory, create a file named not-found.jsx.

• Purpose: Next.js automatically uses this file to render a custom 404 page when a route isn’t found.

b. Build the React Component

1. Start the Component:

   • Open not-found.jsx and set up a functional React component.

   • Example:

     export default function NotFound() {
       return (
         <div>
           {/* Custom Not Found content will go here */}
         </div>
       );
     }

2. Copy and Adapt the Markup:

   • Open your provided not-found.html file and copy the section below the navigation that includes the not-found message, icon, and home button.

   • Paste this markup into your component’s return statement.

   • Important: Replace all HTML attributes with JSX equivalents:

     • Change class to className.

     • Change any self-closing tags as needed.

3. Integrate React Icons:

   • Instead of using an <i> tag from a CDN, import the icon from react-icons.

   • For example, if you want to use an exclamation triangle icon:

     jsxCopyimport { FaExclamationTriangle } from 'react-icons/fa';

   • Replace the existing <i> tag with:

     <FaExclamationTriangle className="fa-5x text-8xl text-yellow-400" />

4. Use Next.js Link for Navigation:

   • Import the Link component from Next.js:

     import Link from 'next/link';

   • Change the "Go Home" anchor tag to a <Link> component that routes to the home page:

     <Link href="/">
       <a className="bg-blue-700 hover:bg-blue-800 text-white font-bold py-4 px-6 rounded">
         Go Home
       </a>
     </Link>

5. Final NotFound Component Example:

   //app/not-found.jsx
   import Link from 'next/link';
   import { FaExclamationTriangle } from 'react-icons/fa';
   
   export default function NotFoundPage() {
     return (
       <section className="bg-blue-50 min-h-screen flex-grow">
         <div className="container m-auto max-w-2xl py-24">
           <div className="bg-white px-6 py-24 mb-4 shadow-md rounded-md border m-4 md:m-0">
             <div className="flex justify-center">
               <FaExclamationTriangle className="fa-5x text-8xl text-yellow-400" />
             </div>
             <div className="text-center">
               <h1 className="text-3xl font-bold mt-8 mb-2">Page Not Found</h1>
               <p className="text-gray-500 text-xl m-10">
                 The page you are looking for does not exist.
               </p>
               <Link href="/" className="bg-blue-700 hover:bg-blue-800 text-white font-bold py-4 px-6 rounded">
                   Go Home
                 
               </Link>
             </div>
           </div>
         </div>
         <div className="flex-grow"></div>
       </section>
     );
   }

---

2. Create a Custom Loading Page

a. Create the File in the App Folder

• Location: In the app/ directory, create a file named loading.jsx.

• Purpose: Next.js uses this file to render a loading indicator during page transitions or data fetching.

b. Build the React Component

1. Mark the Component as Client-Side:

   • Since you’ll use client-side hooks or components (like a spinner), add "use client"; at the top.

     "use client";

2. Install React Spinners:

   • Open your terminal and install the react-spinners package:

     npm install react-spinners

3. Import and Use a Spinner:

   • Import a spinner component (e.g., ClipLoader) from react-spinners:

     import ClipLoader from 'react-spinners/ClipLoader';

   • In your component, return the spinner. Optionally, you can customize its color, size, and CSS override.

     'use client'
     
     import ClipLoader from 'react-spinners/ClipLoader'
     
     export default function Loading({loading}) {
       const override = {
         display: 'block',
         margin: '100px auto',
       }
     
       return (
         <div className="flex justify-center items-center min-h-screen">
           <ClipLoader 
           color="#3B82F6" 
           size={150} 
           loading={loading} 
           cssOverride={override}
           aria-label="Loading Spinner"
           />
         </div>
       )
     }

---

3. Testing and Verification

a. Run the Application

• Start your development server:

  npm run dev

b. Test the Custom Pages

• Not Found Page: Navigate to a non-existent route (e.g., http://localhost:3000/test). You should see your custom 404 page.

• Loading Page: Navigate between pages (for example, from Home to Properties). If the transition takes a moment, your custom loading spinner should appear.

---

Recap

1. Custom Not Found Page:

   • Create not-found.jsx in the app folder.

   • Paste and convert HTML markup from your provided not-found.html.

   • Replace HTML elements with JSX (e.g., className), integrate React icons, and use Next.js Link for navigation.

2. Custom Loading Page:

   • Create loading.jsx in the app folder.

   • Mark it as a client component using "use client";.

   • Install and import react-spinners to display a loading spinner.

   • Return the spinner with custom styling for a seamless loading experience.