refactor: Update proxy and image components to support uploads

- Modified the proxy function to allow access to the "/uploads" route alongside existing public routes.
- Enhanced PhotoImage and PhotoThumbnail components to handle local uploads by treating them similarly to external URLs.
- Updated comments to clarify the changes made regarding uploads and public folder handling.
This commit is contained in:
ilia 2026-01-04 13:48:49 -05:00
parent 76cd2782ec
commit 7ced408041
3 changed files with 8 additions and 7 deletions

View File

@ -5,8 +5,9 @@ import Image from "next/image"
export default function PhotoImage({ src, alt }: { src: string; alt: string }) { export default function PhotoImage({ src, alt }: { src: string; alt: string }) {
// Handle external URLs and local paths // Handle external URLs and local paths
const isExternal = src.startsWith("http://") || src.startsWith("https://") const isExternal = src.startsWith("http://") || src.startsWith("https://")
const isLocalUpload = src.startsWith("/uploads/")
if (isExternal) { if (isExternal || isLocalUpload) {
return ( return (
/* eslint-disable-next-line @next/next/no-img-element */ /* eslint-disable-next-line @next/next/no-img-element */
<img <img
@ -31,7 +32,6 @@ export default function PhotoImage({ src, alt }: { src: string; alt: string }) {
className="object-contain" className="object-contain"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"
loading="lazy" loading="lazy"
unoptimized={src.startsWith("/uploads/")}
/> />
) )
} }

View File

@ -5,10 +5,11 @@ import Image from "next/image"
export default function PhotoThumbnail({ src, alt }: { src: string; alt: string }) { export default function PhotoThumbnail({ src, alt }: { src: string; alt: string }) {
// Handle external URLs and local paths // Handle external URLs and local paths
const isExternal = src.startsWith("http://") || src.startsWith("https://") const isExternal = src.startsWith("http://") || src.startsWith("https://")
const isLocalUpload = src.startsWith("/uploads/")
return ( return (
<div className="w-full h-full relative"> <div className="w-full h-full relative">
{isExternal ? ( {isExternal || isLocalUpload ? (
/* eslint-disable-next-line @next/next/no-img-element */ /* eslint-disable-next-line @next/next/no-img-element */
<img <img
src={src} src={src}
@ -28,7 +29,6 @@ export default function PhotoThumbnail({ src, alt }: { src: string; alt: string
className="object-cover" className="object-cover"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
loading="lazy" loading="lazy"
unoptimized={src.startsWith("/uploads/")}
/> />
)} )}
</div> </div>

View File

@ -6,7 +6,7 @@ export async function proxy(request: NextRequest) {
const pathname = request.nextUrl.pathname const pathname = request.nextUrl.pathname
// Public routes - allow access // Public routes - allow access
if (pathname === "/login" || pathname.startsWith("/api/auth")) { if (pathname === "/login" || pathname.startsWith("/api/auth") || pathname.startsWith("/uploads")) {
return NextResponse.next() return NextResponse.next()
} }
@ -68,8 +68,9 @@ export const config = {
* - _next/rsc (RSC payload requests) * - _next/rsc (RSC payload requests)
* - _next/webpack (webpack chunks) * - _next/webpack (webpack chunks)
* - favicon.ico (favicon file) * - favicon.ico (favicon file)
* - public folder * - uploads/ (uploaded files)
* - public folder files (images, etc.)
*/ */
"/((?!_next/static|_next/image|_next/rsc|_next/webpack|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", "/((?!_next/static|_next/image|_next/rsc|_next/webpack|favicon.ico|uploads|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
], ],
} }