create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/page.tsx

@@ -1,109 +1,201 @@
-// app/page.tsx (New Approach)
 import React from 'react';
-import { cookies, headers } from 'next/headers'; // Import headers
-import { notFound } from "next/navigation";
-import type { Metadata } from 'next';
-import PageClientContent from "./[slug]/PageClientContent"; // Reuse your existing client content component
-import { getPageDataBySlug } from "./[slug]/page.utils";   // Reuse your existing data fetching utility
-import BlockRenderer from "../components/BlockRenderer";  // Adjust path as needed
+import { cookies, draftMode, headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import type { Metadata } from 'next';
+import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import PageClientContent from './[slug]/PageClientContent';
+import { getPageDataBySlug } from './[slug]/page.utils';
+import BlockRenderer from '../components/BlockRenderer';
+import {
+  resolveMetaTitle,
+  resolvePageMetaDescription,
+  stringifyJsonLd,
+  buildSocialMetadata,
+  toOpenGraphLocale,
+} from './lib/seo';
+import { getSiteSettings } from './lib/site-settings';
+import { getRequestOrigin } from '../lib/visual-editing/edit-info';
 
 const DEFAULT_LOCALE = 'en';
 const LANGUAGE_COOKIE_KEY = 'NEXT_USER_LOCALE';
 
-// Helper to determine the correct homepage slug based on locale
-async function getHomepageSlugForLocale(locale: string): Promise<string> {
-  // This logic assumes you have specific slugs for homepages, e.g., 'home' for 'en', 'accueil' for 'fr'
-  // You might fetch this from a 'settings' table or have it hardcoded
-  // Your seed data uses 'home' for EN and 'accueil' for FR.
-  // The navigation items also link '/' to these specific page IDs.
-  // We need to find the page with a specific "home" role/flag or use known slugs.
+export const revalidate = 360;
+
+interface PageTranslation {
+  slug: string;
+  languages: {
+    code: string;
+  }[];
+}
 
-  // Option 1: Hardcoded mapping (simplest if slugs are fixed)
+async function getHomepageSlugForLocale(locale: string): Promise<string> {
   if (locale === 'fr') {
     return 'accueil';
   }
-  return 'home'; // Default to English homepage slug
-
-  // Option 2: Query based on a "is_homepage" flag or a known title/tag in your 'pages' table
-  // (This would require schema modification or a convention)
-  // const supabase = createClient();
-  // const { data, error } = await supabase
-  //   .from('pages')
-  //   .select('slug')
-  //   .eq('language_code', locale) // Assuming you add a language_code column or join with languages
-  //   .eq('is_homepage_flag', true) // Hypothetical flag
-  //   .single();
-  // if (data?.slug) return data.slug;
-  // return locale === 'fr' ? 'accueil' : 'home'; // Fallback
+
+  return 'home';
 }
 
-export async function generateMetadata(): Promise<Metadata> {
-  const head = await headers();
-  let currentLocale = head.get('x-user-locale') || DEFAULT_LOCALE;
+async function getPreferredLocale() {
+  let preferredLocale: string | undefined;
 
-  // Simplified locale detection for metadata
-  if (!head.get('x-user-locale')) {
-    const cookieStore = await cookies();
-    const cookieLocale = cookieStore.get(LANGUAGE_COOKIE_KEY)?.value;
-    if (cookieLocale) {
-      currentLocale = cookieLocale;
+  try {
+    const store = await cookies();
+    preferredLocale =
+      store.get(LANGUAGE_COOKIE_KEY)?.value || store.get('NEXT_LOCALE')?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      preferredLocale =
+        hdrs.get('x-user-locale') ||
+        hdrs.get('accept-language')?.split(',')[0]?.split('-')[0] ||
+        undefined;
+    } catch {
+      preferredLocale = undefined;
     }
   }
 
-  const homepageSlug = await getHomepageSlugForLocale(currentLocale);
-  const pageData = await getPageDataBySlug(homepageSlug);
+  return preferredLocale || DEFAULT_LOCALE;
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  const preferredLocale = await getPreferredLocale();
+  const homepageSlug = await getHomepageSlugForLocale(preferredLocale);
+  const pageData = await getPageDataBySlug(homepageSlug, preferredLocale);
 
   if (!pageData) {
-    return { title: "Homepage Not Found" };
+    return { title: 'Homepage Not Found' };
+  }
+
+  const siteUrl = process.env.NEXT_PUBLIC_URL || '';
+  const supabase = getSsgSupabaseClient();
+
+  const [languagesResult, pageTranslationsResult] = await Promise.all([
+    supabase.from('languages').select('id, code'),
+    supabase
+      .from('pages')
+      .select('language_id, slug')
+      .eq('translation_group_id', pageData.translation_group_id)
+      .eq('status', 'published'),
+  ]);
+
+  const { data: languages } = languagesResult;
+  const { data: pageTranslations } = pageTranslationsResult;
+
+  const alternates: { [key: string]: string } = {};
+  if (languages && pageTranslations) {
+    pageTranslations.forEach((pageTranslation) => {
+      const language = languages.find((candidate) => candidate.id === pageTranslation.language_id);
+      if (language) {
+        alternates[language.code] = `${siteUrl}/${pageTranslation.slug}`;
+      }
+    });
   }
 
-  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "";
+  const title = resolveMetaTitle(pageData.meta_title, pageData.title);
+  const description = resolvePageMetaDescription(pageData.meta_description, pageData.blocks);
+  const { siteTitle } = await getSiteSettings();
 
-  // Simplified metadata without complex hreflang queries for better performance
   return {
-    title: pageData.meta_title || pageData.title,
-    description: pageData.meta_description || "",
+    title,
+    description,
+    ...buildSocialMetadata({
+      title,
+      description,
+      url: `${siteUrl}/`,
+      siteTitle,
+      imageUrl: pageData.feature_image_url,
+      type: 'website',
+      locale: toOpenGraphLocale(pageData.language_code),
+    }),
     alternates: {
       canonical: `${siteUrl}/`,
+      languages: Object.keys(alternates).length > 0 ? alternates : undefined,
     },
   };
 }
 
 export default async function RootPage() {
-  
-  const head = await headers();
-  let currentLocale = head.get('x-user-locale') || DEFAULT_LOCALE;
-
-  // Simplified locale detection - prioritize header/cookie over database query
-  if (!head.get('x-user-locale')) {
-    const cookieStore = await cookies();
-    const cookieLocale = cookieStore.get(LANGUAGE_COOKIE_KEY)?.value;
-    if (cookieLocale) {
-      currentLocale = cookieLocale;
-    }
-    // Skip database query for default language - use fallback
-  }
-
-  const homepageSlug = await getHomepageSlugForLocale(currentLocale);
-  
-  const pageData = await getPageDataBySlug(homepageSlug);
+  const preferredLocale = await getPreferredLocale();
+  const homepageSlug = await getHomepageSlugForLocale(preferredLocale);
+  const pageData = await getPageDataBySlug(homepageSlug, preferredLocale);
 
   if (!pageData) {
-    // This scenario means that for the detected locale, the corresponding homepage slug ('home' or 'accueil')
-    // does not exist or is not published.
-    // Your seed migration (20250521143933_seed_homepage_and_nav.sql) creates these.
-    // Ensure they remain published.
-    console.error(`Homepage data not found for slug: ${homepageSlug} (locale: ${currentLocale})`);
+    console.error(
+      `Homepage data not found for slug: ${homepageSlug} (locale: ${preferredLocale})`
+    );
     notFound();
   }
 
-  const pageBlocks = pageData ? <BlockRenderer blocks={pageData.blocks} languageId={pageData.language_id} /> : null;
+  const translatedSlugs: { [key: string]: string } = {};
+  if (pageData.translation_group_id) {
+    const supabase = getSsgSupabaseClient();
+    const { data: translations } = await supabase
+      .from('pages')
+      .select('slug, languages!inner(code)')
+      .eq('translation_group_id', pageData.translation_group_id)
+      .eq('status', 'published');
+
+    if (translations) {
+      translations.forEach((translation: PageTranslation) => {
+        if (translation.languages && translation.languages.length > 0 && translation.slug) {
+          translatedSlugs[translation.languages[0].code] = translation.slug;
+        }
+      });
+    }
+  }
+
+  const requestOrigin = await getRequestOrigin();
+  const draft = await draftMode();
+  const visualEditingEnabled =
+    draft.isEnabled || process.env.NEXTBLOCK_VISUAL_EDITING_ENABLED === 'true';
+  const siteUrl = process.env.NEXT_PUBLIC_URL || '';
+  const nonce = (await headers()).get('x-nonce') || undefined;
+  const title = resolveMetaTitle(pageData.meta_title, pageData.title);
+  const description = resolvePageMetaDescription(pageData.meta_description, pageData.blocks);
+  const pageJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    name: title,
+    description,
+    url: `${siteUrl}/`,
+    inLanguage: pageData.language_code,
+  };
+  const pageBlocks = (
+    <BlockRenderer
+      blocks={pageData.blocks}
+      languageId={pageData.language_id}
+      visualEditing={{
+        enabled: visualEditingEnabled,
+        documentType: "page",
+        documentId: pageData.id,
+        slug: pageData.slug,
+        languageId: pageData.language_id,
+        draftId: pageData.draft_id ?? null,
+        pageOrigin: requestOrigin,
+      }}
+    />
+  );
 
-  // Pass currentSlug as homepageSlug to PageClientContent, so it knows what content it's rendering.
-  // PageClientContent's logic for language switching will still work if the user changes language via the switcher.
   return (
-    <PageClientContent initialPageData={pageData} currentSlug={homepageSlug}>
-      {pageBlocks}
-    </PageClientContent>
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: stringifyJsonLd(pageJsonLd) }}
+      />
+      <PageClientContent
+        initialPageData={pageData}
+        currentSlug={homepageSlug}
+        translatedSlugs={translatedSlugs}
+      >
+        {pageBlocks}
+      </PageClientContent>
+    </>
   );
-}
+}