**Abstract:** This post provides a guide to conditionally rendering components, such as a footer, within a Next.js 14 application using the App Router. It details a solution for hiding components on specific pages by bridging server and client components through the React Context API and the `usePathname` hook, addressing challenges posed by Next.js's server/client component architecture. **Estimated reading time:** _4 minutes_ ## Current Tech Stack - **Framework**: Next.js 14 (app router) - **Internationalization**: next-intl - **CSS**: Tailwind CSS - **Backend**: Supabase with Auth-UI ## The Challenge: Conditional Footer Rendering In our Next.js application, we faced a common but challenging situation: we needed to hide the footer on certain pages, especially our divination page. This task, which seems simple, became complicated because of how server components and client components work together in Next.js 14's app router. ### The Initial Approach First, we tried to use client-side hooks (like `usePathname`) directly in our main layout component. However, this caused problems because, in Next.js 14, the layout is a server component by default. Server components cannot directly use client-side hooks like `usePathname`. ## The Solution: Bridging Server and Client Components After trying a few things, we found a solution that effectively connects server and client components: 1. **Create a Footer Context**: We created a React Context to keep track of whether the footer should be visible or hidden. 2. **Develop a Client Wrapper**: We made a client component that uses this context to decide whether to show or hide the footer. 3. **Update the Layout**: We updated our main layout to use these new components, making sure it could still work as a server component. ### Step 1: The Footer Context ```typescript "use client"; import React, { createContext, useContext, useState, useEffect } from "react"; import { usePathname } from "next/navigation"; const FooterContext = createContext({ showFooter: true }); export function useFooterContext() { const context = useContext(FooterContext); if (context === undefined) { throw new Error("useFooterContext must be used within a FooterProvider"); } return context; } export function FooterProvider({ children }: { children: React.ReactNode }) { const [showFooter, setShowFooter] = useState(true); const pathname = usePathname(); useEffect(() => { setShowFooter(!pathname.includes("/divination")); }, [pathname]); return ( {children} ); } ``` ### Step 2: The Client Footer Wrapper ```tsx "use client"; import { useFooterContext } from "@/hooks/footerContext"; import Footer from "@/components/Footer"; export default function ClientFooterWrapper() { const { showFooter } = useFooterContext(); if (!showFooter) return null; return