Dynamic page outside of root layout
Answered
Sphecid wasp posted this in #help-forum
Sphecid waspOP
I need to create page outside of root layout. It should have its own html (just plain text in body tag, react not needed), but to be dynamic still, make database requests, etc (currently I have it in public folder, so fully static). Is it possible in app router?
Also is it possible to create partially dynamic url? The idea is to have /page-[id], so it matches /page-1, /page-2, /page-whatever and gives access to this dynamic parameter
Also is it possible to create partially dynamic url? The idea is to have /page-[id], so it matches /page-1, /page-2, /page-whatever and gives access to this dynamic parameter
Answered by joulev
/[pageId]/route.ts
return new Response("<!DOCTYPE html>…", { headers: { "Content-Type": "text/html" } })
return new Response("<!DOCTYPE html>…", { headers: { "Content-Type": "text/html" } })
8 Replies
Sphecid waspOP
Seems like route handlers can be used to break out of root layout. Then the only question remains is best way to make this partially dynamic segment for
/page-1
/page-2
/page-1
/page-2
@Sphecid wasp I need to create page outside of root layout. It should have its own html (just plain text in body tag, react not needed), but to be dynamic still, make database requests, etc (currently I have it in public folder, so fully static). Is it possible in app router?
Also is it possible to create partially dynamic url? The idea is to have /page-[id], so it matches /page-1, /page-2, /page-whatever and gives access to this dynamic parameter
/[pageId]/route.ts
return new Response("<!DOCTYPE html>…", { headers: { "Content-Type": "text/html" } })
return new Response("<!DOCTYPE html>…", { headers: { "Content-Type": "text/html" } })
Answer
@Sphecid wasp Seems like route handlers can be used to break out of root layout. Then the only question remains is best way to make this partially dynamic segment for
/page-1
/page-2
Parse the dynamic segment and validate it manually
@joulev Parse the dynamic segment and validate it manually
Sphecid waspOP
If I match correct value and return, how to keep unmatched values to behave as default (404)?
Redirect it to a not found route. Something like redirect("/404")
Or even rewrite, if you wish
Sphecid waspOP
Can it be done at middleware level better maybe?
You can do at middleware level yes, but the redirect/rewrite to a 404 page is still applicable there. You cannot tell a non-page to render 404 by itself