auto-claude: subtask-5-3 - Add Chatbot component to layout with lazy loading
- Import dynamic from next/dynamic for lazy loading - Create lazy-loaded Chatbot component with ssr: false (uses browser-only APIs like localStorage) - Add Chatbot inside NextIntlClientProvider for i18n support - Component loads on client-side only for optimal performance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import { getMessages, setRequestLocale } from 'next-intl/server';
|
||||
import { Inter } from 'next/font/google';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { locales, localeMetadata, seoKeywords, type Locale } from '@/i18n/config';
|
||||
import type { Metadata } from 'next';
|
||||
import { Header, Footer, GlobalBackground } from '@/components/layout';
|
||||
@@ -9,6 +10,11 @@ import { PersonJsonLd, ProfessionalServiceJsonLd, OrganizationJsonLd, WebSiteJso
|
||||
import { WebVitals } from '@/components/analytics';
|
||||
import '../globals.css';
|
||||
|
||||
// Lazy load Chatbot component - uses browser-only APIs (localStorage)
|
||||
const Chatbot = dynamic(() => import('@/components/chat/Chatbot').then((mod) => mod.Chatbot), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
@@ -123,6 +129,8 @@ export default async function LocaleLayout({ children, params }: Props) {
|
||||
<main className="flex-1 pt-16 relative z-10">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
{/* AI Chatbot - lazy loaded for performance */}
|
||||
<Chatbot />
|
||||
</NextIntlClientProvider>
|
||||
{/* Core Web Vitals monitoring */}
|
||||
<WebVitals />
|
||||
|
||||
Reference in New Issue
Block a user