fix: update not-found.tsx location and fix params error
- Move not-found.tsx to app root for proper 404 handling - Fix params destructuring error in not-found component - Add app root level not-found.tsx for locale-aware 404 pages
This commit is contained in:
Unchained
@@ -16,13 +16,16 @@ export const metadata: Metadata = {
|
||||
description: "Discover our bestselling natural oils for hair and skin care.",
|
||||
};
|
||||
|
||||
interface NotFoundPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
}
|
||||
|
||||
export default async function NotFoundPage({ params }: NotFoundPageProps) {
|
||||
const { locale } = await params;
|
||||
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
||||
export default async function NotFoundPage() {
|
||||
// Get locale from URL path
|
||||
const headersList = await headers();
|
||||
const pathname = headersList.get("x-invoke-path") || headersList.get("x-matched-path") || "/";
|
||||
|
||||
// Extract locale from path (e.g., /en/products → en, /sr/products → sr)
|
||||
const pathSegments = pathname.split("/").filter(Boolean);
|
||||
const potentialLocale = pathSegments[0];
|
||||
const validLocale = isValidLocale(potentialLocale) ? potentialLocale : DEFAULT_LOCALE;
|
||||
|
||||
const t = await getTranslations({ locale: validLocale, namespace: "NotFound" });
|
||||
const productReviewT = await getTranslations({ locale: validLocale, namespace: "ProductReviews" });
|
||||
|
||||
@@ -49,7 +52,6 @@ export default async function NotFoundPage({ params }: NotFoundPageProps) {
|
||||
}>;
|
||||
|
||||
// Track 404 page view via OpenPanel (client-side will handle this)
|
||||
const headersList = await headers();
|
||||
const referer = headersList.get("referer") || "";
|
||||
|
||||
return (
|
||||
@@ -189,7 +191,7 @@ export default async function NotFoundPage({ params }: NotFoundPageProps) {
|
||||
<div
|
||||
key={review.id}
|
||||
className="bg-white rounded-lg p-6 shadow-sm opacity-0 translate-y-5"
|
||||
style={{ animation: `fadeInUp 0.6s ease-out ${index * 0.1}s forwards` }}
|
||||
style={{ animation: `fadeInUp 0.6s ease-out ${index * 100}ms forwards` }}
|
||||
>
|
||||
<div className="flex gap-1 mb-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
|
||||
279
src/app/not-found.tsx
Normal file
279
src/app/not-found.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { getProducts, getProductImage, getProductPrice } from "@/lib/saleor";
|
||||
import { getSaleorLocale, isValidLocale, DEFAULT_LOCALE } from "@/lib/i18n/locales";
|
||||
import type { Locale } from "@/lib/i18n/locales";
|
||||
import type { Product } from "@/types/saleor";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Star, ArrowRight } from "lucide-react";
|
||||
import TrustBadges from "@/components/home/TrustBadges";
|
||||
import UrgencyMessages from "@/components/404/UrgencyMessages";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Page Not Found | ManoonOils",
|
||||
description: "Discover our bestselling natural oils for hair and skin care.",
|
||||
};
|
||||
|
||||
export default async function NotFoundPage() {
|
||||
// Get locale from URL path
|
||||
const headersList = await headers();
|
||||
const pathname = headersList.get("x-invoke-path") || headersList.get("x-matched-path") || "/";
|
||||
|
||||
// Extract locale from path (e.g., /en/products → en, /sr/products → sr)
|
||||
const pathSegments = pathname.split("/").filter(Boolean);
|
||||
const potentialLocale = pathSegments[0];
|
||||
const validLocale = isValidLocale(potentialLocale) ? potentialLocale : DEFAULT_LOCALE;
|
||||
|
||||
const t = await getTranslations({ locale: validLocale, namespace: "NotFound" });
|
||||
const productReviewT = await getTranslations({ locale: validLocale, namespace: "ProductReviews" });
|
||||
|
||||
const saleorLocale = getSaleorLocale(validLocale as Locale);
|
||||
|
||||
// Fetch products
|
||||
let products: Product[] = [];
|
||||
try {
|
||||
products = await getProducts(saleorLocale);
|
||||
} catch (error) {
|
||||
console.error("Error fetching products for 404 page:", error);
|
||||
}
|
||||
|
||||
// Get first 4 products as bestsellers
|
||||
const bestsellers = products.slice(0, 4);
|
||||
|
||||
// Get product reviews for rotation
|
||||
const productReviews = productReviewT.raw("reviews") as Array<{
|
||||
id: number;
|
||||
name: string;
|
||||
location: string;
|
||||
text: string;
|
||||
rating: number;
|
||||
}>;
|
||||
|
||||
// Track 404 page view via OpenPanel (client-side will handle this)
|
||||
const referer = headersList.get("referer") || "";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div
|
||||
className="opacity-0 translate-y-5 animate-[fadeInUp_0.6s_ease-out_forwards]"
|
||||
>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif italic text-[#1A1A1A] mb-4 leading-tight">
|
||||
{t("title")}
|
||||
</h1>
|
||||
<p className="text-xl sm:text-2xl text-[#666666] mb-8 font-light">
|
||||
{t("subtitle")}
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href={`/${validLocale}/products`}
|
||||
className="inline-flex items-center gap-2 px-8 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
|
||||
>
|
||||
{t("shopBestsellers")}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<TrustBadges />
|
||||
|
||||
{/* Urgency Messages */}
|
||||
<UrgencyMessages />
|
||||
|
||||
{/* Bestsellers Section */}
|
||||
<section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div
|
||||
className="text-center mb-12 opacity-0 translate-y-5"
|
||||
style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
|
||||
>
|
||||
<span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
|
||||
Popular
|
||||
</span>
|
||||
<h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
|
||||
{t("bestsellersTitle")}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{bestsellers.length > 0 ? (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
|
||||
{bestsellers.map((product, index) => {
|
||||
const image = getProductImage(product);
|
||||
const price = getProductPrice(product);
|
||||
const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={product.id}
|
||||
className="group opacity-0 translate-y-5"
|
||||
style={{
|
||||
animation: `fadeInUp 0.5s ease-out ${index * 100}ms forwards`
|
||||
}}
|
||||
>
|
||||
<Link href={`/${validLocale}/products/${product.slug}`} className="block">
|
||||
<div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
|
||||
{image ? (
|
||||
<Image
|
||||
src={image}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-[#999999]">
|
||||
<span className="text-sm">No Image</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isAvailable && (
|
||||
<div className="absolute inset-0 bg-white/80 flex items-center justify-center">
|
||||
<span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
|
||||
Out of Stock
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<button
|
||||
className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
Quick Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p className="text-[14px] text-[#666666]">
|
||||
{price || "Contact for price"}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-[#666666]">No products available at the moment.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-[#F0F7FA]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div
|
||||
className="text-center mb-12 opacity-0 translate-y-5"
|
||||
style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
|
||||
>
|
||||
<span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
|
||||
Testimonials
|
||||
</span>
|
||||
<h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
|
||||
{t("testimonialsTitle")}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{productReviews.slice(0, 6).map((review, index) => (
|
||||
<div
|
||||
key={review.id}
|
||||
className="bg-white rounded-lg p-6 shadow-sm opacity-0 translate-y-5"
|
||||
style={{ animation: `fadeInUp 0.6s ease-out ${index * 100}ms forwards` }}
|
||||
>
|
||||
<div className="flex gap-1 mb-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < review.rating
|
||||
? "fill-amber-400 text-amber-400"
|
||||
: "fill-gray-200 text-gray-200"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[#1A1A1A] mb-4 text-sm leading-relaxed">
|
||||
“{review.text}”
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#c9a962] to-[#e8967a] flex items-center justify-center text-white font-medium text-sm">
|
||||
{review.name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-[#1A1A1A] text-sm">{review.name}</p>
|
||||
<p className="text-xs text-[#6B7280]">{review.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div
|
||||
className="opacity-0 translate-y-5"
|
||||
style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
|
||||
>
|
||||
<h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] mb-4 tracking-tight">
|
||||
{t("finalCTATitle")}
|
||||
</h2>
|
||||
<p className="text-lg sm:text-xl text-[#666666] mb-8 font-light">
|
||||
{t("finalCTASubtitle")}
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href={`/${validLocale}/products`}
|
||||
className="inline-flex items-center gap-2 px-10 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
|
||||
>
|
||||
{t("viewAllProducts")}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* OpenPanel Tracking Script */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if (typeof window !== 'undefined' && window.op) {
|
||||
window.op('track', '404_page_view', {
|
||||
url: window.location.pathname,
|
||||
referrer: '${referer}'
|
||||
});
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<style jsx global>{`
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user