-
SummaryNext.js new I have an sincere question here regarding 
And here is my codebase for it: import { Metadata } from "next"
import Link from "next/link"
export const metadata: Metadata = {
title: "Page Not Found | Printify",
description: "The page you are looking for does not exist.",
}
export default function GlobalNotFound() {
return (
<html>
<body>
<div className="min-h-screen bg-gradient-to-br from-primary to-secondary flex flex-col">
{/* Navbar spacer */}
<div className="h-16"></div>
<main className="flex-1 flex items-center justify-center p-4 sm:p-6">
<div className="bg-white rounded-xl sm:rounded-2xl md:rounded-3xl shadow-xl overflow-hidden w-full max-w-md">
{/* Header */}
<div className="bg-gradient-to-r from-primary to-secondary p-6 text-center">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">
404 - Page Not Found
</h1>
</div>
<div className="p-6 sm:p-8">
<div className="flex flex-col items-center text-center">
{/* Icon */}
<div className="mb-6 text-accent">
<svg
className="w-20 h-20"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="space-y-4 mb-8">
<h2 className="text-xl sm:text-2xl font-bold text-text">
Oops! Page Not Found
</h2>
<p className="text-text-light text-sm sm:text-base">
The page you're looking for doesn't exist or may have been moved.
Please check the URL or navigate back to our homepage.
</p>
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 w-full">
<Link
href="/"
className="px-6 py-3 bg-accent text-white rounded-lg hover:bg-secondary transition-colors font-medium text-center"
>
Return Home
</Link>
<Link
href="/contact"
className="px-6 py-3 border border-accent text-accent rounded-lg hover:bg-bg-highlight transition-colors font-medium text-center"
>
Contact Support
</Link>
</div>
</div>
</div>
</div>
</main>
{/* Footer spacer */}
<div className="h-16"></div>
</div>
</body>
</html>
)
}I hope someone can answer my question and concern Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
|
Hi, did you figure this out? |
Beta Was this translation helpful? Give feedback.
-
|
Yes sir, I just figure it. I just imported my |
Beta Was this translation helpful? Give feedback.
-
|
@GioMjds you closed this after opening it, but I also see this issue. What was the solution for you? |
Beta Was this translation helpful? Give feedback.
-
|
yes sir, I just already figure it out after the update. Thank you |
Beta Was this translation helpful? Give feedback.
-
What do you mean you figured it out? I'm saying I still see the issue you described in my codebase and am on the latest version of Next. Was there some code change you made? |
Beta Was this translation helpful? Give feedback.
-
|
I just imported above of my import { Metadata } from "next"
import Link from "next/link"
import { Lexend } from "next/font/google"
import Image from "next/image"
import NotFound from "../../public/not-found.png"
import './globals.css'
const lexend = Lexend({
variable: "--font-lexend",
subsets: ["latin"],
})
export const metadata: Metadata = {
title: "Page Not Found | Printify",
description: "The page you are looking for does not exist.",
}
export default function GlobalNotFound() {
return (
<html lang="en">
<body className={`${lexend.variable} antialiased`}>
<div className="min-h-screen bg-gradient-to-br from-primary to-secondary flex flex-col items-center justify-center p-4 relative overflow-hidden">
{/* Floating particles */}
{[...Array(15)].map((_, i) => (
<div
key={i}
className="absolute rounded-full"
style={{
width: `${Math.random() * 10 + 5}px`,
height: `${Math.random() * 10 + 5}px`,
background: `rgba(255, 255, 255, ${Math.random() * 0.3 + 0.1})`,
top: `${Math.random() * 100}%`,
left: `${Math.random() * 100}%`,
animation: `float ${Math.random() * 10 + 10}s linear infinite`,
animationDelay: `${Math.random() * 5}s`
}}
/>
))}
{/* Main content */}
<div className="glass-card p-8 sm:p-10 max-w-2xl w-full z-50 backdrop-blur-sm border border-white/20 overflow-hidden">
{/* Shimmer effect */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -inset-12 bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-20 animate-shimmer"></div>
</div>
<div className="relative z-10 text-center space-y-8">
{/* 404 text with glow */}
<div className="relative">
<h1 className="text-4xl sm:text-6xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent via-highlight to-secondary mb-4">
404 Not Found
</h1>
<div className="absolute inset-0 bg-gradient-to-r from-accent to-secondary opacity-20 blur-xl rounded-full -z-10"></div>
</div>
{/* Image with floating effect */}
<div className="relative h-48 w-48 mx-auto animate-float">
<Image
src={NotFound}
alt="Lost in space illustration"
fill
className="object-contain drop-shadow-lg"
/>
<div className="absolute inset-0 rounded-full bg-accent opacity-10 blur-md -z-10"></div>
</div>
{/* Message */}
<div className="space-y-4">
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-white">
Oops! You've Found a Digital Void
</h2>
<p className="text-white/80 text-sm sm:text-base max-w-md mx-auto">
The page you're seeking has vanished into the digital ether.
But don't worry - we'll help you navigate back to familiar territory.
</p>
</div>
{/* Action button with pulse animation */}
<div>
<Link
href="/"
className="inline-flex cursor-pointer z-50 items-center px-8 py-3 sm:px-10 sm:py-4 bg-gradient-to-r from-accent to-secondary text-white font-medium rounded-lg group overflow-hidden"
>
Return to Home
</Link>
</div>
</div>
</div>
<div className="flex items-center justify-center mt-8 text-center max-w-lg">
<div className="absolute -inset-1 rounded-lg bg-gradient-to-r from-accent to-secondary opacity-20 blur-sm"></div>
<p className="text-white/60 text-xs sm:text-sm px-4 py-2 bg-white/5 rounded-lg backdrop-blur-sm">
Need help? Our support team is standing by to assist you.
</p>
</div>
</div>
</body>
</html>
)
}And that's resolves my problem |
Beta Was this translation helpful? Give feedback.
-
|
cool. i would consider that a good workaroud, but i still think this is a bug. ima open a ticket |
Beta Was this translation helpful? Give feedback.
-
|
#82399 documentation updated |
Beta Was this translation helpful? Give feedback.
@GioMjds you closed this after opening it, but I also see this issue. What was the solution for you?