Created
March 19, 2025 10:36
-
-
Save sommeeeer/7a01701cc3b5781ff8fa231b9fcf5703 to your computer and use it in GitHub Desktop.
How to add tailwind styles to global-error.tsx in Next.js 14
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Next 14.2.24 | |
| 'use client'; | |
| import { Squirrel } from 'lucide-react'; | |
| import { Figtree } from 'next/font/google'; | |
| import { useEffect } from 'react'; | |
| import Logo from '@/components/icons/logo'; | |
| import { Button } from '@/components/ui/button'; | |
| import './(main)/globals.css'; | |
| const figtree = Figtree({ | |
| display: 'swap', | |
| subsets: ['latin'], | |
| }); | |
| export default function GlobalError({ | |
| error, | |
| reset, | |
| }: { | |
| error: Error & { digest?: string }; | |
| reset: () => void; | |
| }) { | |
| useEffect(() => { | |
| async function postLog() { | |
| await fetch('/api/errorlog', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| cause: error.cause || '', | |
| digest: error.digest || '', | |
| message: error.message || '', | |
| name: error.name || '', | |
| stack: error.stack || '', | |
| source: 'global', | |
| }), | |
| }); | |
| } | |
| void postLog(); | |
| }, [error]); | |
| return ( | |
| <html | |
| lang="no" | |
| className={`${figtree.className} scrollbar scrollbar-track-snurr-background scrollbar-thumb-snurr-lightblue scrollbar-track-rounded-md scrollbar-thumb-rounded-md`} | |
| > | |
| <head> | |
| <title>@yourapp - Something went wrong</title> | |
| </head> | |
| <body className="relative mx-auto flex w-full max-w-7xl flex-col items-center justify-center gap-12 px-4 py-12 antialiased sm:gap-20 sm:py-20"> | |
| <Logo className="h-28 w-28 sm:h-36 sm:w-36 lg:h-40 lg:w-40" /> | |
| <section className="flex max-w-sm flex-col gap-4"> | |
| <Squirrel className="size-8" /> | |
| <h2 className="text-xl text-snurr-primary">Something went wrong.</h2> | |
| <p className="text-lg"> | |
| Send us an email if you want further help at{' '} | |
| <a | |
| className="cursor-pointer underline transition duration-200 hover:text-snurr-primary" | |
| href="mailto:support@domain.com" | |
| > | |
| support@domain.com | |
| </a> | |
| </p> | |
| <div className="flex flex-col gap-3"> | |
| <Button onClick={() => reset()}> | |
| Try again | |
| </Button> | |
| <Button | |
| onClick={() => window.location.reload()} | |
| > | |
| Reload the page | |
| </Button> | |
| </div> | |
| </section> | |
| </body> | |
| </html> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment