DEV Community: Khan Rabiul

Next.js + TailwindCSS v4: How to Add Dark/Light Theme with Next-Themes

Khan Rabiul — Sat, 20 Dec 2025 13:53:07 +0000

TailwindCSS v4 no longer maintains multiple config files-everything now goes inside a single global.css file. This can make theming feel a bit challenging. In this guide, I'll show you how to easily set up light, dark, and even custom themes in your Next.js project using next-themes.

Step 01: Initiate your project

👉 Install your Next.js project

pnpm create next-app my-project-name
pnpm install
pnpm dev

👉 Install Next Themes

pnpm add next-themes

Step 02: Modify your `layout.tsx`

👉 Wrap the application(children) with `<ThemeProvider></ThemeProvider>`. In the following example, I keep all the default `Next.js` code.

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "next-themes";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
       <ThemeProvider>
         {children}
       </ThemeProvider>
      </body>
    </html>
  );
}

👉 Add attributes for `ThemeProvider`.

<ThemeProvider enableSystem={true} defaultTheme="system" >
{children}
</ThemeProvider>

Attributes

enableSystem={true} ensures that your application can perform according to the user's device preference. By default, it is false.

defaultTheme="system" defines which theme will be loaded on the first load of the application.

error

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

Add suppressHydrationWarning attribute in html tag. It will solve the error.

<html lang="en" suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
       <ThemeProvider enableSystem={true} defaultTheme="system">
         {children}
       </ThemeProvider>
      </body>
    </html>

Remember that ThemeProvider is not a server component. It is a client component.

Step 03: Customize your color

👉 `global.css`

Add them to your global.css

@import 'tailwindcss';

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

To work with tailwindcss v4, @import 'tailwindcss' is required.

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)) line of code enables dark classes in HTML tags.

<div className="bg-gray-300 dark:bg-amber-500">
    <h2 className="text-xl text-teal-600">Next Theme With Tailwindcss v4
    </h2>
</div>

When the dark theme is selected, the style applied for dark mode will be applied. In the example, bg-amber-500 will be applied for the dark theme.

Now add colors variables as you prefer.

@theme {
  /* theme background color */
  /* Light mode default */
  --bg-color-light-default: hsl(220, 14%, 96%);
 /* Dark mode default */
  --bg-color-dark-default: hsl(207, 95%, 8%);  
}

Use the theme, directive as you use in tailwindcss.

Add :root selector for each theme. The application will maintain background colors from the root of your application.

:root[data-theme="light"] {
  background-color: var(--color-background-light);
}

:root[data-theme="dark"] {
  background-color: var(--color-background-dark);
}

Step 04: Add theme toggler button

To change different themes, I am going to use lucid react icons library.
As it is a user's interactive button, it will be a client component. I make it different component for it, named ThemetogglerBtn.tsx.

pnpm install lucide-react

ThemetogglerBtn.tsx

'use client';

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Sun, Moon } from 'lucide-react';

export default function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme, resolvedTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  },
    []);

const toggleTheme = () => {
  setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
}

  if (!mounted) {
    return (
      <div className="w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
      </div>
    )
  }

  const currentIcon = resolvedTheme === 'dark' ? (<Sun size={24} className="text-yellow-500" />) :
  (<Moon size={24} strokeWidth={2} className="text-gray-700"/>);

  return (
    <button
      onClick={toggleTheme}
      className="p-2 rounded-full flex items-center           justify-center transition-colors bg-[--bg-light] hover:bg-[--bg-light] dark:hover:bg-[--bg-light]"
      aria-label={resolvedTheme === 'dark' ? "Switch to light theme" : "Switch to dark theme"}
      title={resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
    >
      {currentIcon}
      <span className="sr-only">Theme switcher button</span>
    </button>
  )
};

👉 `useTheme` `hook`

import use-theme() from next-themes
const {theme, setTheme, resolvedTheme = useTheme()

🌗 `theme` shows the current selected theme.

🌗 `setTheme`, with the setter function, we can set a new theme.

🌗 `resolvedTheme`: It acknowledges the system presence theme. Currently, is it `dark`or `light` theme active on the user's device?

👉 `mounted` `state`

In next.js useTheme may mismatch hydration for client and server side components. To avoid this, we use mounted state.

const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true)
},[])

Initially mounted = false
After rendering client component, it becomes true
So it ensures theme toggler works only in client side.

🌗 `toggleTheme` theme toggler function

const toggleTheme =() => {
setTheme(resolvedTheme = 'dark' ? 'light' : 'dark');
}

If the current value of resolvedTheme === dark, then it will change the theme to light. And if resolvedTheme === light, it will change to dark.

🌗 Change icon

const currentIcon = resolvedTheme === `dark` ?
(<Sun size={24} className='text-yellow-500' />) 
: <Moon size={24} className='text-gray-700'/>)

If dark mode is enabled, it will render Sun icon. And for light mode Moon icon.

🌗 UI in `button`

<button onClick={toggleTheme}>
{currentIcon}
 <span className="sr-only">Theme switcher button</span>
</button>

Clicking on the button activates toggleTheme function.
{currentIcon}: renders icon.
<span className="sr-only">Theme switcher button</span>: sr-only is a good practice for accessibility.

✅ At a glance

Install next-themes
Wrap app with <ThemeProvider>
Configure global.css with @custom-variant dark
Add theme toggler button with useTheme hook
Enjoy smooth dark/light theme switching 🎉

Parallel Routes in Next.js

Khan Rabiul — Mon, 26 May 2025 16:10:00 +0000

Parallel routes is a powerful feature in Next.js. It allows you to render one or more independent pages in the same layout.

`Slots`

The parallel routes are called slots. Slots are passed as props to the parent layout. Slots are defined with the @foldername convention.

How to Create `Parellel` `Routes`

Step 1: Make Folder Structure

parallel-routes/app/
├── components/
│   ├── Footer.tsx
│   └── Header.tsx
├── dashboard/
│   ├── @oldusers/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── globals.css
├── layout.tsx
└── page.tsx

To make the dashboard route accessible, create a page.tsx file in the dashboard directory. Define your individual slots under the dashboard directory. For every individual slot create a page.tsx file in it.

Step 2: Define `slots` in the `layout`.

Inject your slots in the dashboard's layout. As slots are received as props destructure and use them in the layout.

export default function Dashboard ({children ,oldusers}: {
  children: React.ReactNode;
  oldusers: React.ReactNode;
}) {
  return(
    <>
    <main className="h-screen flex items-center justify-center">
      {children}
      {oldusers}
    </main>
    </>
  )
}

Now you should see your dashboard and slots by navigating .../dashboard. But one interesting thing you may notice is. In your browser's URL, there is no balance or other slots routes in the URL. Because slots does not act as a path.
If you want to create more slots, inject them into your layout.

export default function Dashboard ({children ,oldusers, newusers}: {
  children: React.ReactNode;
  oldusers: React.ReactNode;
  newusers: React.ReactNode;
}) {
  return(
    <>
    <main>
      {children}
      {oldusers}
      {newusers}
    </main>
    </>
  )
}

Handling `error` and `loading` for `slots`

In Next.js gives flexibility in handling errorandloading. To handleerrorandloadingfor apagewe have to createerror.tsxandloading.tsxin the same directory as thatpage.Solotsare individualpage, we can handleerrorandloadingfor everyslotseparately. Createerror.tsxin youslots(@balance`) directory.

`
'use client'

import { useEffect } from "react";

const Error = ({ error, reset }) => {
useEffect(() => {
console.error(error)
}, [error])

return (

Something went wrong!

Reason: {error.message}

className="bg-black text-white p-1 rounded-md m-auto"
onClick={() => reset()}
>
Try again

);
};

export default Error;

`
You can handle your component as you want.

Create `routes` for `slots`

Step 1: Import `Link`

`
import Link from 'next/link'

Step 2: Create a `Link` `Component`. That will redirect to the `page`.

`
import Link from 'next/link'

New Users

Step 3: Where to create the new `page`.

If you think our route is /dashboard/newusers/ so you have to create a directory under dashboard and a page in it. Then you are wrong. You have to create a directory in the slot from where the user can go to the route.
In our case, we have a slot named oldusers. We will make a folder newusers and a page in the oldusers directory. As we do for creating routes in Next.js.
Now you can go to the newusers page from the oldusers slot by clicking the Link/button.

Step 4: `404 Not found` page.

When users reload on /dashboard/newusers/ page. Users will be redirected to the Not found page. To prevent this issue, we need to use the default.js/jsx/tsx.. file in our directory.
In the parent(dashboard) create a default.tsx file. And style it as it looks like with all slots. Also, we need to use the default.tsx component for every single slot where there are new routes are available. The default.tsx component will look like the slot looks.

`
app/
├── dashboard/
│ ├── layout.tsx
│ ├── page.tsx

│ ├── default.tsx

│ ├── @oldusers/

│ │ ├── default.tsx

│ │ └── newusers/

│ │ └── page.tsx

│ └── @anotherSlot/

│ └── default.tsx

Now users if users refresh or directly access the /dashboard/newusers/ link, they will see your pages/slots.

Templates in Next.js

Khan Rabiul — Fri, 23 May 2025 14:28:43 +0000

In Next.js layout.tsx is a shared UI component between routes. layout.tsx never rerenders when we navigate from one route to another. We use layout to render static elements that are not supposed to be changed. Like, the Header, Footer, etc. It means, layout keeps your component/pages or UI the same way and renders the page.tsx in it as children, if you want.

Difference between `layout` and `template`

Just like layout template also wraps the pages and components as children. But the main difference between layout and template is, layout can keep the current state, but template can't. That's why layout does not change the UI or does not manipulate the DOM. On the other hand, template does not hold the state value. It changes the state rerenders the UI, and manipulates the DOM.

Creating a template is very simple.

Create a file named template.tsx/jsx/js.. in your desired directory.
In the template, returning a React component is compulsory.
Do as you do in layout.tsx

import SignUp from './signup';

export default function MyTemplate({ children }: { children: React.ReactNode }) {
  return (
    <main>
      <SignUp />
      {children}
    </main>
  );
}

In summary, don't use template for static assets. Use it for where state needs to be changed and rerender the component.

`'use client'`

Sometimes you may need to use 'use client'.

When you use any React hook or state (useState, useEffect) in your template
Attaches event handlers or relies on browser APIs (window, document)
Imports other Client Components (e.g., a carousel, chart, or provider)
Once "use client" is present, all imports become part of the client bundle.

Link and its props in Next.js

Khan Rabiul — Sun, 18 May 2025 15:17:01 +0000

In this article we will describe Next.js Link and its props

Link is primarily used to navigate between routes in Next.js. It is a React component that extends the HTML <a> element. It provides client-side navigation and prefetching facilities.

✍️ How to use Link in Next.js

To use Link in Next.js we need to import it from next/link.

import Link from 'next/link

Then we can use it in UI. href is required. So we have to pass a value for it. The value is the routes where we want to navigate. Here, by clicking the button users will be navigated to about page.

import Link from 'next/link';
export default function Home() {
  return (
    <div>
      Welcome to the Home page
      <div>
        <Link href="/about">
          <button className='px-3 py-2 bg-blue-600 text-white rounded-md'>Go to About Page</button>
        </Link>
      </div>
    </div>
  );
}

NB: Only href is required and rest are optional.

👉 href: We have described it before.

👉 replace

It is optional, and the default value is false. When we add replace, the value is settled to true. It means the browser's history is replaced with a new URL. Now, users can not go to the previous page by clicking the browser's back button.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" replace>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus">
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contactus Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

What is happening now? As we used replace props in Link component. If the user navigates to the about page by clicking the button from the Home Page. The user can not get back to to Home Page(previous page).

Where/when to use

login/logout page: After login or logout the user will be redirected to the Home Page. From there he/she should not -back- to the login or logout page again.
form submission: After submitting a form, the user will be redirected to the -Welcome Page- and will not be allowed to back to the form submission page.
And many more places where users are not allowed to back to the previous page.

👉 scroll

scroll props control the viewport behavior. If scroll={true} is true, users will see the component/page in his/her viewport. If not visible in the viewport, Next.js will scroll to the top of the first page element. The default value is true. If you want to disable the behavior, set scroll={false}.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" scroll={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus" scroll={false}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact us Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

👉 Where to use

If you have a huge list on your page, or the page is an infinite scroll page, and you want to hold the position of the viewport. So that users can return to the same viewport after navigating other pages, set scroll={false}.

👉 prefetch

By prefetching, we mean preloading the JavaScript code, static assets, and data required for server-side rendering of the page associated with the link. Next.js automatically prefetches routes in production when a <Link> component enters the user’s viewport.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" prefetch={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus" prefetch={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact Us Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

From the example, prefetch happens when users enter the home page as the link component is associated. If users click the button, the component will be shown immediately as it is loaded in the background.
If prefetch={false} is seated, the linked component will never be prefetched until users enter the page/component.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" prefetch={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus" prefetch={false}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

From the example, -about us- page will be prefetched when users enter the -home page-, but the -contact us page- will not. -contact us- page will be fetched when users click on the -Link- component.
Prefetching is disabled in development mode to avoid unnecessary network activity during hot reloads.

👉 Where to use

-prefetch- gives smooth page navigation.
Balance Bandwidth: Excessive prefetching can overwhelm network resources. Use -prefetch={false}- on rarely visited or large routes.

👉 legacyBehavior

An <a> element is no longer required as a child of <Link>.
Example wrong way

<div>
  <Link >
       <a href="">
           <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                  Go to Contactus Page
           </button>
        </a>
   </Link>
</div>

Example right way

<div>
  <Link href="/contactus">
    <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact Page
    </button>
  </Link>
</div>

NB:_ Do not use <a> tag.

👉 passHref

The passHref is used to pass the href prop to its child in Next.js via the <Link> component. This is important when the child of <Link> is a custom component that wraps an anchor tag <a>.

👉 shallow

The shallow props let us update the path of the current page without running any of Next.js' data fetching methods. The default value is false.

👉 locale

The locale prop is used to navigate users to different versions of a webpage based on the user's preferred locale.
next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'bn'],
    defaultLocale: 'en',
  },
};

<Link href="/about" locale={true}>
  About Page (locale true)
</Link>

As locale is true, by clicking the link prefix is added to the author. Like _en/about.

<Link href="/about" locale={false}>
  About Page (locale false)
</Link>

As locale is false, by clicking the link prefix will not be added to the about. Like /about. It works like it normally does.

👉 onNavigate

An event handler is called during client-side navigation. The handler receives an event object that includes a preventDefault() method, allowing you to cancel the navigation if needed.

import Link from 'next/link'

export default function Page() {
  return (
    <Link
      href="/dashboard"
      onNavigate={(e) => {
        // Only executes during SPA navigation
        console.log('Navigating...')

        // Optionally prevent navigation
        // e.preventDefault()
      }}
    >
      Dashboard
    </Link>
  )
}

While onClick and onNavigate may seem similar, they serve different purposes. onClick executes for all click events, while onNavigate only runs during client-side navigation.
Some key differences:

onClick executes with keyboard commands to navigate, but onNavigate won't.
External URLs won't trigger onNavigate.
Links with the download attribute will work with onClick but not onNavigate

👉 Open the Linked page in a new tab

If you want, the following page/coponent will be opened in a new tab. As like <a> tag does with target='_blank' attributes. You can do it with <Link> component in Next.js in the same way.

<div>
   <Link href="/contactus" target='_blank'>
     <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact us Page
     </button>
   </Link>
</div>

You can also use other target attributes like: _parent, _self, _top

The Link component is very useful in Next.js to navigate different pages in your web application.

Layout in Next.js

Khan Rabiul — Thu, 08 May 2025 17:26:41 +0000

layout.tsx takes a React component as a children. There is a default layout file in the app directory. The file determines the main layout of Header, Footer, and other general component. The layout file in the app directory can not be removed. It means if you delete the file and run the project, the layout file will be regenerated.

layout file may look like:

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <header>My App Header</header>
        <main>{children}</main>
        <footer>My App Footer</footer>
      </body>
    </html>
  );
}

With the superpower of Next.js, layout receives all the files named page.tsx/jsx/... and creates UI for you. Next.js automatically wraps all page.tsx (or .js/.jsx/.tsx) files under app/ with the nearest layout.tsx in the file tree. You don’t manually import or attach pages to layouts—file-system conventions, do that for you.

Nested `layout`

In your project, you need one shared layout and another for deeper. Like, for root layout app/layout.tsx and for nested app/user/username/layout.tsx.
The folder structure should look like this,

next-practice/app/
├── globals.css
├── layout.tsx
├── page.tsx
└── user/
    ├── page.tsx
    └── username/
        ├── layout.tsx
        └── page.tsx

How's it working?

* root layout `app/layout.tsx`

It renders all children until it finds another layout.tsx file. In our case, the root layout will render the app/page.tsx and user/page.tsx as they are the children of layout.tsx.
As app/user/username/layout.tsx contains another layout file, it will stop rendering the root layout.
At this point, app/user/username/layout.tsx will render the new layout's UI, how you designed.
Now app/user/username/layout.tsx becomes the root layout for its nested pages/routes.
If you create more nested directories and page.tsx in the username, they will be rendered in the app/user/username/layout.tsx layout.

Keeping the page.tsx in the same directory as layout.tsx is a must. Otherwise, the route segment for the layout will not be accessible. Keep in mind layout.tsx does not create route, but page.tsx does. So to make the route accessible, you need the page.tsx there. For example

next-practice/app/
├── globals.css
├── layout.tsx           
└── user/
    ├── page.tsx     
    └── username/
        ├── layout.tsx

If you try to access /user/username you will see 404 Not Found Page. As there is no page.tsx file. To make the route accessible add a page.tsx/js/jsx/... file there.

Dynamic Routes in Next.js

Khan Rabiul — Sun, 04 May 2025 15:37:04 +0000

A dynamic route lets your application handle URLs whose segments aren’t known ahead of time. In Next.js, you create a dynamic segment by wrapping a folder or file name in square brackets []. The App Router then maps any matching URL into that segment and passes its value as a params object to your page component. This approach keeps your routing flexible and your code DRY, whether you’re building user profiles /users/[username] or blog posts /posts/[id].

What are Dynamic Routes?

Dynamic Routes allow you to define URL patterns with placeholders instead of hard-coding every path. When a request arrives, Next.js fills in those placeholders and hands you the values to render the right content.

Why use them?

Flexibility: One route file can handle dozens or thousands of URLs without manual setup.
Scalability: Your codebase stays lean as your app grows.

Setting up Dynamic Routes

Add square brackets around the segment name in your app folder.
Next.js will treat that bracketed folder (or file) as a dynamic segment

app/
├── layout.js
├── page.js
└── blog/
    └── [slug_Or_Any_Name]/
        └── page.js

Here app/blog/[slug]/page.js file will be rendered for the /blog/<value> route.

Working with Route Parameters

When you export an async page component inside a dynamic folder, Next.js injects a params object containing your segment value(s):

// app/blog/[slug]/page.tsx
interface Params { slug: string }

const BlogPost = async ({ params }: { params: Params }) => {
  // params.slug holds the URL value, e.g. "my-first-post"
  return <h1>Post: {params.slug}</h1>
}

export default BlogPost

The page component must be async because Next.js may fetch data before rendering.
You can destructure params directly in the function signature.

Catch-All segments

You can create an infinite sub-route under a route.
In general catch-all-segment takes a value. But catch-all-segment can hold all nested routes' value as an array of strings.

Create `catch-all segment`

Like dynamic route, make the directory into [] add ... before the directory name. [...slug]

/app/[...path]/page.js

Get params

const Product = async ({params} : {params : path: string[]) => {
const {path} = await param;
return (
<>
<h1> Return you page or component </h1>
)
}
export default Product;

Now you can see your component at this URL endpoint.

Optional `catch-all segment`

If you want to match both the base route and deeper paths with one file, wrap the catch-all in double brackets. This way, no error occurs when no segments are provided. You can make the catch-all segments optional by adding the parameter in double square brackets: [[...slug]]

app/
└── docs/
    ├── page.tsx              # handles the base /docs route
    └── [[...slug]]/          # optional catch-all
        └── page.tsx          # handles /docs/* at any depth

Deep dive into the optional catch-all segment: In Next.js, showing how to serve /docs with its own page and route all deeper paths /docs/post1, /docs/post2, /docs/post1/comments/2, etc. to a single catch-all handler—without triggering a 404 for unknown slugs. You’ll see folder setup, how Next.js maps URLs to params, and how to render your page component unconditionally for any nested route.
Optional catch-all segments use [[...slug]] in your folder name. This matches both the base path /docs with params.slug === undefinedand any depth /docs/* with params.slug as an array of strings

Folder Structure

app/
└── docs/
    ├── page.tsx              # handles the base /docs route
    └── [[...slug]]/          # optional catch-all
        └── page.tsx          # handles /docs/* at any depth

Visiting /docs → renders app/docs/page.tsx with no params
Visiting /docs/post1 → renders app/docs/[[...slug]]/page.tsx with params.slug === ['post1']
Visiting /docs/post1/comments/2 → same catch-all page with params.slug === ['post1','comments','2']

NB: We never call notFound() when doc is missing; instead, we show fallback content
Handling params

// app/docs/[[...slug]]/page.tsx

interface Params {
  // slug may be undefined (for /docs) or an array of strings
  slug?: string[];
}

const DocsCatchAll = async ({ params }: { params: Params }) => {
  // Normalize to an array so you can always iterate or destructure safely
  const parts = params.slug ?? [];  
  // e.g. [] for /docs, ['post1'] for /docs/post1, etc.

  // Example destructure:
  const [post, section, id] = parts;

  return (
    <div>
      <h1>Catch-all Docs Page</h1>
      {parts.length === 0 && <p>This is the main docs home.</p>}
      {parts.length === 1 && <p>Showing doc: {post}</p>}
      {parts.length === 2 && <p>Inside section “{section}” of {post}</p>}
      {parts.length >= 3 && (
        <p>
          Deep path: {post} / {section} / {id}… ({parts.join(' / ')})
        </p>
      )}
    </div>
  );
};

export default DocsCatchAll;

useRouter in Next.js

Khan Rabiul — Wed, 30 Apr 2025 06:01:45 +0000

The useRouter is a hook in Next.js providing programmatic navigation and access to the current route's data. Calling the hook returns an object. From the object you can get access to

current path name (pathname)
query parameter (query)
with push, replace, and other methods, able to navigate between pages/components
can control browser history with back, reload, and other methods.

👉 How to use `useRouter` hook

First, import from the correct packages.

import { useRouter } from 'next/navigation'

NB: next/router is deprecated in Next.js 15.
Since useRouter is a client-side hook, you have to use "use client" at the top of the file.

useRouter hook returns an object of

push
back
forward
refresh
replace
prefetch and
hmrRefresh methods Let's describe one by one.

👉 `push`

It is used to navigate new routes programmatically. It adds a new browser history to the stack. Its syntax is router.push(href, options?). Providing an option is not mandatory.
NB: To know more about optoins read the article. Link props are similar to options
Know more about option or Link props


"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();
  const aboutRouteHandler = () => {
    router.push('/about');
  }
  const contactRouteHandler = () => {
    router.push('/contactus', {scroll: false});
  }
  return (
    <div className="space-y-8">
      <div>
        {/* Without option */}
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={aboutRouteHandler}>
          Go to About Page
        </button>
      </div>
      <div>
        {/* With option */}
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" 
        onClick={contactRouteHandler}>
          Go to Contact us Page
        </button>
      </div>
    </div>
  );
};

export default AboutPage;

Users can navigate new page, keeping the option to go back to the previous page.

👉 `replace`

It updates the current history entry and removes the previous entry. Syntax: router.replace(href, options?)

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();
  const aboutRouteHandler = () => {
    router.replace('/about');
  }
  const contactRouteHandler = () => {
    router.replace('/contactus', {scroll: false});
  }
  return (
    <div className="space-y-8">
      <div>
        {/* Without option */}
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={aboutRouteHandler}>
          Go to About Page
        </button>
      </div>
      <div>
        {/* With option */}
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" 
        onClick={contactRouteHandler}>
          Go to Contact us Page
        </button>
      </div>
    </div>
  );
};

export default AboutPage;

For using replace method, users are not able to go back to the previous page.

--Where to use:--
After login, form submission users will be redirected to another page. And going back to the login, form page does not make sense.

👉 `refresh`

refresh the current page without affecting the browsing history. It is used to update and reflect the latest state. It re-fetched data and the server component. Syntax: router.refresh()

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();

  const aboutRouteHandler = () => {
    router.refresh();
  }
  return (
    <div className="space-y-8">
      <div>
        {/* Without option */}
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={aboutRouteHandler}>
          Go to About Page
        </button>
      </div> 
    </div>
  );
};
export default AboutPage;

👉 `prefetch`

prefetch cached JS, data, and segment for the specific routes. So that, for the next click, the page can be loaded immediately. Syntax: router.prefetch(href)

'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function AboutPage() {
  const router = useRouter();

  useEffect(() => {
    // যখন AboutPage কম্পোনেন্ট মাউন্ট হবে তখনই প্রিফেচ
    router.prefetch('/contactus');
    router.prefetch('/help');
  }, [router]);

  const handleGo = (path) => {
    router.push(path);
  };

  return (
    <div className="space-y-4">
      <button
        className="px-3 py-2 bg-green-600 text-white rounded-md"
        onClick={() => handleGo('/contactus')}
      >
        Go to Contact Us
      </button>
      <button
        className="px-3 py-2 bg-indigo-600 text-white rounded-md"
        onClick={() => handleGo('/help')}
      >
        Get Help
      </button>
    </div>
  );
}

Those pages will be pre-loaded when using useEffect().

_Or we can combine push and prefetch altogether

'use client';
import { useRouter } from 'next/navigation';

export default function AboutPage() {
  const router = useRouter();

  const handleMouseEnter = () => {
    router.prefetch('/contactus');   // Contactus
  };

  const handleClick = () => {
    router.push('/contactus');       /
  };

  return (
    <div className="space-y-8">
      <button
        className="px-3 py-2 bg-blue-600 text-white rounded-md"
        onMouseEnter={handleMouseEnter}
        onClick={handleClick}
      >
        Go to Contact Us
      </button>
    </div>
  );
}

When mouse enters the button the component get loaded in background. For push method user redirected to the page immediately.

👉 `back`

back method allows users to go back a step in history.

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();

  const returnPageHandler = () => {
    router.back();
  }
  return (
    <div className="space-y-8">
      <div>
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={returnPageHandler}>
          Back to Previous Page
        </button>
      </div> 
    </div>
  );
};
export default AboutPage;

👉 `forward`

forward works the same way as the back method does. But goes one step forward from history.

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();

  const nextPageHandler = () => {
    router.forward();
  }
  return (
    <div className="space-y-8">
      <div>
        <button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={nextPageHandler}>
          Go to Next Page
        </button>
      </div> 
    </div>
  );
};
export default AboutPage;

👉 `hmrRefresh()`

It works only in development mode. Without reloading the page fully, it refreshes the page's data.

Routes Group - Next.js

Khan Rabiul — Tue, 22 Apr 2025 09:08:10 +0000

We know that creating any folder in App Router creates a route. But if you want to create nested route without breaking URL. You can use routes group.
You want to make routes like: http://localhost:3000/signout
and http://localhost:3000/signin
First, take a look at the problem, if you do in general.

app/
├── auth/
│   ├── login/
│   │   └── page.js
|   ├── logout/
│   │   └── page.js
└── layout.js

Now try to access http://localhost:3000/signout _
and http://localhost:3000/signin. You are redirected to 404 Not Found Page.
What happens?
app is the root route. Then you add another directory named auth. Into auth login and logout belong. So the URL becomes http://localhost:3000/auth/signout _
and http://localhost:3000/auth/signin.
Go to those links you will see your signing or signout page.

But you don't want to add `auth` to your routes. How can you achieve it?

routes group: The folder you don't want to add as a route, keep the folder name in parentheses(). You have done it! It is so simple in Next.js.

app/
├── (auth)/
│   ├── login/
│   │   └── page.js
|   ├── logout/
│   │   └── page.js
└── layout.js

Now go to those links: http://localhost:3000/signout_
And http://localhost:3000/signin, you will find your pages.

By using routes group, you can keep your route structure clean, modular, and layout focused.

How to create page in Next.js

Khan Rabiul — Sun, 20 Apr 2025 15:40:10 +0000

page.tsx

File-based routing is introduced in Next.js from v13. That means the file's name is the route name.
If we create a page.tsx into the app directory, the page.tsx will create the default route.This is known as the home route. If you visit http://localhost:3000/ you can see the Home component there.

File structure:

└── app/
    └── page.tsx

Again if we create any directory under app directory,this will create a new route. The name of the route is the of the file itself. Like we want to create a new route about. User can see the about component or page if he/she navigate to http://localhost:3000/about

└── app/
    ├── about/
    │   └── page.tsx
    └── page.tsx

import React from 'react';

const AboutPage: React.FC = () => {
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-4xl font-bold text-gray-800 mb-6">About Us</h1>
      <div className="bg-white shadow-md rounded-lg p-6">
        <p className="text-gray-700 leading-relaxed mb-4">
          Welcome to our website! We are a team of passionate individuals dedicated to creating amazing things.
        </p>
        <p className="text-gray-700 leading-relaxed mb-4">
          Our mission is to provide high-quality services and products that meet the needs of our customers.
        </p>
        <p className="text-gray-700 leading-relaxed">
          We believe in innovation, collaboration, and continuous improvement.
        </p>
      </div>
    </div>
  );
};

export default AboutPage;

Now user see the AboutPage component or page if he/she navigate to http://localhost:3000/about

NB: Naming Convention: Use all lowercase letters for directory names to follow best practices.

To create a route we need a folder. The folder name is the route. Inside that folder, add a special file named page.tsx, page.jsx, or page.js. This file contains the component that will render when the route is accessed.
Now we are able to create any route for level one. But what about http://localhost:3000/products/mobile/samsung

Nested Routes

Imagine the situation, where the user can navigate to the home page, and clicking on a product will navigate to the products page. Clicking on a product from the products page, the user will navigate to the specific product (mobile) route. Further, if the user wants to see product(mobile) details user will be navigated to another route(samsung). How can we do this?
It is very simple in Next.js. You should think simply.

Step 01: We know to create a route we need a directory. The directory name must be matched with the route name.

Step 02: Into `app` directory there is a `page.tsx` file that will create the home route. http//:localhost:3000/

Step 03: Nested Routes

For every nested routes, we also need a nested directory. In our case, our route is .../products/mobile/samsung. This means need a directory in app directory named products. Then create another directory in products directory named mobile. In the same way, create another directory named samsung into mobile directory.

└── app/
    ├── about/
    │   └── page.tsx
    ├── page.tsx
    └── products/
        └── mobile/
            └── samsung/

We just created the routes http://localhost:3000/products/mobile/samsung.

Step 04: page.tsx

However, the user can not access the routes. If any user tries to access the routes he/she will be directed to 404 | Not Found page. To make it publically accessible we need a special file page.tsx for every nested route. Into the page.tsx file you can render your desired component.

└── app/
    ├── about/
    │   └── page.tsx
    ├── page.tsx
    └── products/
        ├── mobile/
        │   ├── page.tsx
        │   └── samsung/
        │       └── page.tsx
        └── page.tsx

Now users can get access to the routes.
If the user navigates http://localhost:3000/products user can see products page.
By navigating http://localhost:3000/products/mobile users have access to this routes. Finally use have access for http://localhost:3000/products/mobile/samsung routes.

Tailwind CSS V4 Dark Mode

Khan Rabiul — Thu, 03 Apr 2025 18:44:44 +0000

How to implement theme toggler in tailwind CSS v4 in React project

Theme handler

First, we need a button or a component that will toggle dark and light mode.
Into the component, we need useState to hold the context's current value.

Create the Theme Controller component

Button.jsx

const DarkModeToggler = () => {
return (
<>
<button>
{darkMode ? "Dark" : "Light" }
</button>
)
};

Use in CSS file. The file could be `index.css` or `global.css` or something else.

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Create Context

Now create a context. It should look like this src/context/ThemeContext.jsx. Into the ThemeContext.jsx component we will implement the react context's logic.

import {createContext, useEffect, useState } from "react";

const ThemeContext = createContext('light');

const ThemeProvider = ({children}) => {
const [darkMode, setDarkMode] = useState(
localStorage.getItem("theme") === "dark"
)

return(
<ThemeContext.Provider value={{darkMode,setDarkMode}}>
{children}
</ThemeContext.Provider>
)

}

Here we can use hard-coded useStatelogic. Like const [darkMode, setDarkMode] = useState('light'). This will also work. But when a user refreshes the page the useState value will be re-seted. To prevent this issue we used localStorage, which is the current value for darkMode.To know when to use dark mode and when to use light mode, we need to use useEffect.

useEffect(() => {
if(darkMode) {
document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark");
} else { 
  document.documentElement.classList.remove("dark");
loacalStorage.setItem("theme", "light");
}
}, 
[darkMode])

Here,

import { createContext, useContext, useEffect, useState } from "react";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => { 
  const [darkMode, setDarkMode] = useState(
    localStorage.getItem("theme") === "dark"
  );

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else { 
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

  return (
    <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useDarkMode = () => useContext(ThemeContext);

Export `ThemeContext`

export const useDarkMode = () => useContext(ThemeContext)

NB: Don't forget to export the component `export const ThemeProvider = () => {...}`

Here is the final code for `ThemeContext.jsx`

import { createContext, useContext, useState, useEffect } from "react";

const ThemeContext = createContext("light");

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(
    localStorage.getItem("theme") === "dark"
  );

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

  return (
    <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useDarkMode = () => useContext(ThemeContext);

Now we are ready to use controlling them.
To implement we have to go to the root component.main.jsx and wrap it with <ThemeProvider> ...</ThemeProvider>

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import ThemeProvider from "./context/ThemeContext.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

Change the state in the toggler component(`DarkModeToggler.jsx`) and import `state` from `ThemeContext`. To toggle them we need an `onClick` and a `handlerfunction` The component should look like this.

import { useContext } from "react";
import { ThemeContext } from "../context/ThemeContext";

const DarkModeToggler = () => {
  const { darkMode, setDarkMode } = useContext(ThemeContext);

  return (
    <button
      onClick={() => setDarkMode((prev) => !prev)}
      className="p-2 border rounded"
    >
      {darkMode ? "Light Mode" : "Dark Mode"}
    </button>
  );
};

export default DarkModeToggler;

Now we are ready to use dark and light mode in our application.

Here is a simple example of how to use the theme.

import { useDarkMode } from "../context/ThemeContext";

const Card = () => {
  const { darkMode } = useDarkMode();

  return (
    <div className="p-5 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
      <h2 className="text-xl font-bold">Dark Mode Card</h2>
      <p className="mt-2">This card changes theme based on the mode.</p>
      <button className="mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg">
        Click Me
      </button>
    </div>
  );
};

export default Card;

NavLInk

Khan Rabiul — Sun, 15 Dec 2024 16:07:48 +0000

NavLink, Link-এর মতই কাজ করে। তবে এটি Navigation Link তৈরিতে ব্যবহৃত হয়। NavLink active state handle করতে পারে। কোন Link-টি active আছে তাতে নির্দিষ্ট style যুক্ত করা যায়।

import {NavLink} from "react-router-dom";
<NavLink to="contact"
calssName={function for dynamic style}
<NavLink>

লক্ষণীয়ঃ className: A function (with isActive as an argument) যা active state অনুযায়ী class যুক্ত করে।

To nest or not to nest

Khan Rabiul — Tue, 10 Dec 2024 16:15:26 +0000

কখন Route nest করতে হবে কখন করতে হবে না

Nested Routes ব্যবহার

Parent-Child Relationship আছে:
যদি একটি parent component এর সাথে child component এর সরাসরি সম্পর্ক থাকে, তাহলে Nested Routes ব্যবহার করুন।
উদাহরণ: Dashboard → Settings, Profile, Notifications।
Shared Layout বা Component:
Parent এবং তার child routes যদি একটি shared layout (যেমন Navigation Bar, Sidebar) ব্যবহার করে, Nested Routes আদর্শ।

<Route path="dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

Dynamic Routes:
Parent route এর উপর ভিত্তি করে child routes তৈরির প্রয়োজন হলে Nested Routes সাহায্য করে।
উদাহরণ: /products/:id এর অধীনে /products/:id/details এবং /products/:id/reviews।

Nested Routes কখন ব্যবহার না করা?

Independent Routes:
যদি routes গুলো parent route-এর উপর নির্ভরশীল না হয় এবং আলাদা component বা layout render করে, তাহলে Nested Routes ব্যবহার করবেন না। উদাহরণ: Home, About, Blog, Contact একে অপরের সাথে সম্পর্কিত নয়।
Overhead কমাতে:
Nested Routes ব্যবহারে অতিরিক্ত structure তৈরি হতে পারে। যদি খুব বেশি nesting না লাগে, তবে আলাদা আলাদা route রাখা ভালো।
SEO এবং Performance:
খুব বেশি nesting করলে routes জটিল হয়ে যায়। এটি SEO বা application performance-এ প্রভাব ফেলতে পারে।

নিজেকে সহজ এ প্রশ্নটি করুন:
Component গুলোর মধ্যে যুক্তিসংগত Parent-Child সম্পর্ক আছে কি?
হ্যাঁ → Nested Routes।
না → Separate Routes।

DEV Community: Khan Rabiul

Next.js + TailwindCSS v4: How to Add Dark/Light Theme with Next-Themes

Step 01: Initiate your project

👉 Install your Next.js project

👉 Install Next Themes

Step 02: Modify your layout.tsx

👉 Wrap the application(children) with <ThemeProvider></ThemeProvider>. In the following example, I keep all the default Next.js code.

👉 Add attributes for ThemeProvider.

Attributes

error

Step 03: Customize your color

👉 global.css

Step 04: Add theme toggler button

👉 useTheme hook

🌗 theme shows the current selected theme.

🌗 setTheme, with the setter function, we can set a new theme.

🌗 resolvedTheme: It acknowledges the system presence theme. Currently, is it darkor light theme active on the user's device?

👉 mounted state

🌗 toggleTheme theme toggler function

🌗 Change icon

🌗 UI in button

✅ At a glance

Parallel Routes in Next.js

Slots

How to Create Parellel Routes

Step 1: Make Folder Structure

Step 2: Define slots in the layout.

Handling error and loading for slots

Something went wrong!

Reason: {error.message}

Create routes for slots

Step 1: Import Link

Step 2: Create a Link Component. That will redirect to the page.

Step 3: Where to create the new page.

Step 4: 404 Not found page.

Templates in Next.js

Difference between layout and template

'use client'

Link and its props in Next.js

In this article we will describe Next.js Link and its props

✍️ How to use Link in Next.js

✍️ Link component has some important props:

👉 href: We have described it before.

👉 replace

Where/when to use

👉 scroll

👉 Where to use

👉 prefetch

👉 Where to use

👉 legacyBehavior

👉 passHref

👉 shallow

👉 locale

👉 onNavigate

👉 Open the Linked page in a new tab

Layout in Next.js

Nested layout

* root layout app/layout.tsx

Dynamic Routes in Next.js

What are Dynamic Routes?

Why use them?

Setting up Dynamic Routes

Working with Route Parameters

Catch-All segments

Create catch-all segment

Optional catch-all segment

Folder Structure

useRouter in Next.js

👉 How to use useRouter hook

👉 push

👉 replace

👉 refresh

👉 prefetch

👉 back

👉 forward

👉 hmrRefresh()

Routes Group - Next.js

But you don't want to add auth to your routes. How can you achieve it?

How to create page in Next.js

page.tsx

Step 02: Modify your `layout.tsx`

👉 Wrap the application(children) with `<ThemeProvider></ThemeProvider>`. In the following example, I keep all the default `Next.js` code.

👉 Add attributes for `ThemeProvider`.

👉 `global.css`

👉 `useTheme` `hook`

🌗 `theme` shows the current selected theme.

🌗 `setTheme`, with the setter function, we can set a new theme.

🌗 `resolvedTheme`: It acknowledges the system presence theme. Currently, is it `dark`or `light` theme active on the user's device?

👉 `mounted` `state`

🌗 `toggleTheme` theme toggler function

🌗 UI in `button`

`Slots`

How to Create `Parellel` `Routes`

Step 2: Define `slots` in the `layout`.

Handling `error` and `loading` for `slots`

Create `routes` for `slots`

Step 1: Import `Link`

Step 2: Create a `Link` `Component`. That will redirect to the `page`.

Step 3: Where to create the new `page`.

Step 4: `404 Not found` page.

Difference between `layout` and `template`

`'use client'`

Nested `layout`

* root layout `app/layout.tsx`

Create `catch-all segment`

Optional `catch-all segment`

👉 How to use `useRouter` hook

👉 `push`

👉 `replace`

👉 `refresh`

👉 `prefetch`

👉 `back`

👉 `forward`

👉 `hmrRefresh()`

But you don't want to add `auth` to your routes. How can you achieve it?

Step 02: Into `app` directory there is a `page.tsx` file that will create the home route. http//:localhost:3000/

Use in CSS file. The file could be `index.css` or `global.css` or something else.

Export `ThemeContext`

NB: Don't forget to export the component `export const ThemeProvider = () => {...}`

Here is the final code for `ThemeContext.jsx`

Change the state in the toggler component(`DarkModeToggler.jsx`) and import `state` from `ThemeContext`. To toggle them we need an `onClick` and a `handlerfunction` The component should look like this.