“How we’re handling meta titles in our Next.js 14 app – looking for
feedback”

We’re using Next.js 14 with App Router and have a hybrid approach for
meta titles. Most of our pages are protected routes (auth required) so
SEO isn’t critical, but we want to ensure good UX with proper browser tab
titles.

Current Implementation:
———————————————————————
// METHOD 1: Client-side (90% of our pages use this)
// app/(protected)/kwjar/page.tsx
‘use client’;

import { useEffect } from ‘react’;
import { useAuth } from ‘@/app/context/AuthContext’;

export default function KwjarPage() {
const { user } = useAuth();

// Set page title after component mounts
useEffect(() => {
document.title = ‘/kwjar – Snefuru’;
}, []);

if (!user) {
return

;
}

return (

);
}

// METHOD 2: Server-side metadata (rarely used)
// app/(protected)/bin34/tebnar2/page.tsx
import { Metadata } from ‘next’;

export const metadata: Metadata = {
title: ‘tebnar2’, // Uses root layout template
};

export default function Tebnar2Page() {
return

// ROOT LAYOUT: Provides template for all pages
// app/layout.tsx
export const metadata: Metadata = {
title: {
template: “%s – Snefuru”, // Child pages fill in %s
default: “Snefuru” // Fallback if no title set
},
description: “Your AI Image Generation Platform”,
};

Technical Details:
– Using ‘use client’ directive on most pages due to auth requirements
– document.title executes client-side after React hydration
– Protected routes behind authentication, so SEO not a concern
– Title changes are visible after component mount (slight delay)
– No