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 { NextIntlClientProvider } from 'next-intl';
|
||||||
import { getMessages, setRequestLocale } from 'next-intl/server';
|
import { getMessages, setRequestLocale } from 'next-intl/server';
|
||||||
import { Inter } from 'next/font/google';
|
import { Inter } from 'next/font/google';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
import { locales, localeMetadata, seoKeywords, type Locale } from '@/i18n/config';
|
import { locales, localeMetadata, seoKeywords, type Locale } from '@/i18n/config';
|
||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { Header, Footer, GlobalBackground } from '@/components/layout';
|
import { Header, Footer, GlobalBackground } from '@/components/layout';
|
||||||
@@ -9,6 +10,11 @@ import { PersonJsonLd, ProfessionalServiceJsonLd, OrganizationJsonLd, WebSiteJso
|
|||||||
import { WebVitals } from '@/components/analytics';
|
import { WebVitals } from '@/components/analytics';
|
||||||
import '../globals.css';
|
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({
|
const inter = Inter({
|
||||||
subsets: ['latin'],
|
subsets: ['latin'],
|
||||||
display: 'swap',
|
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>
|
<main className="flex-1 pt-16 relative z-10">{children}</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
{/* AI Chatbot - lazy loaded for performance */}
|
||||||
|
<Chatbot />
|
||||||
</NextIntlClientProvider>
|
</NextIntlClientProvider>
|
||||||
{/* Core Web Vitals monitoring */}
|
{/* Core Web Vitals monitoring */}
|
||||||
<WebVitals />
|
<WebVitals />
|
||||||
|
|||||||
Reference in New Issue
Block a user