Next.js Discord

Discord Forum

layout

Unanswered
Japanese pilchard posted this in #help-forum
Open in Discord
Japanese pilchardOP
Hello, I am working on a Next.js 14 application using app router instead of page router. I have a layout that I would like to share between the login and register directories.

However, I want to be able to change the image displayed in the layout depending on which directory I am in, without having to recreate a layout inside each directory.

|- layout
|- login/
   |- index.tsx
|- register/
   |- index.tsx

import React from 'react';
import Image from 'next/image';

export default function Layout({ children, svgContent }) {
  return (
    <div>
      <div>{children}</div>
      <Image src={svgContent} alt="Dynamic Image" />
    </div>
  );
}


I am looking for advice on how to pass a different svgContent variable from each page (login or register) to this central Layout. Is there an optimal way to manage this type of dynamic behavior with Next.js without duplicating code or using external componants?

Thank you for your advice!

1 Reply

Dwarf Crocodile
Easiest way would probably be to create a simple client component that does a check

"use client";
import { usePathname } from 'next/navigation'

export const MyImage = () => {
  const pathname = usePathname();
  return (
    <Image src={pathname.endsWith("/login") ? loginSvgContent : registerSvgContent} alt="Dynamic Image" />
  ) 
}


then include the <MyImage /> component in your layout