Justin Edmund
1f8de7ee30
## Summary - Fixes Railway deployment build failures caused by dynamic server usage errors - Marks routes that use runtime features as `force-dynamic` to prevent static generation attempts - Creates proper error pages to handle 404/500 scenarios ## Problem The build was failing with "Dynamic server usage" errors because Next.js was trying to statically generate pages that use runtime features like: - `cookies()` for authentication - `searchParams` for filtering - Dynamic data fetching that requires request-time context ## Solution Added `export const dynamic = 'force-dynamic'` to: ### API Routes - `/api/jobs/route.ts` - uses searchParams - `/api/jobs/skills/route.ts` - uses cookies via fetchFromApi - `/api/version/route.ts` - uses cookies via fetchFromApi - `/api/raids/groups/route.ts` - uses cookies via fetchFromApi - `/api/parties/route.ts` - uses searchParams and cookies - `/api/parties/[shortcode]/route.ts` - uses cookies - `/api/parties/[shortcode]/remix/route.ts` - uses cookies ### Page Components - `/app/[locale]/teams/page.tsx` - uses searchParams - `/app/[locale]/new/page.tsx` - fetches dynamic data - `/app/[locale]/saved/page.tsx` - uses cookies and searchParams - Additional pages to avoid useContext errors during static generation ### Error Handling - Created `/pages/_error.tsx` - Simple error page without i18n complexity - Created `/app/not-found.tsx` - App Router 404 page ## Test plan - [x] Build completes successfully locally with `npm run build` - [ ] Deploy to Railway staging environment - [ ] Verify all dynamic routes work correctly - [ ] Check error pages display properly 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>
47 lines
No EOL
1.3 KiB
TypeScript
47 lines
No EOL
1.3 KiB
TypeScript
import { NextPageContext } from 'next'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
|
|
interface ErrorProps {
|
|
statusCode: number
|
|
}
|
|
|
|
function Error({ statusCode }: ErrorProps) {
|
|
return (
|
|
<div className="error-page" style={{ padding: '2rem', textAlign: 'center' }}>
|
|
<Head>
|
|
<title>
|
|
{statusCode
|
|
? `${statusCode} - Server Error / granblue.team`
|
|
: 'Client Error / granblue.team'}
|
|
</title>
|
|
</Head>
|
|
|
|
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
|
|
<h1 style={{ fontSize: '4rem', marginBottom: '1rem' }}>{statusCode || 'Error'}</h1>
|
|
<p style={{ marginBottom: '2rem' }}>
|
|
{statusCode
|
|
? `A ${statusCode} error occurred on the server.`
|
|
: 'An error occurred on the client.'}
|
|
</p>
|
|
<Link href="/" style={{
|
|
display: 'inline-block',
|
|
padding: '0.75rem 1.5rem',
|
|
backgroundColor: '#007bff',
|
|
color: 'white',
|
|
borderRadius: '0.25rem',
|
|
textDecoration: 'none'
|
|
}}>
|
|
Go Home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Error.getInitialProps = ({ res, err }: NextPageContext) => {
|
|
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
|
|
return { statusCode }
|
|
}
|
|
|
|
export default Error |