notFound() does not work
Answered
American Sable posted this in #help-forum
American SableOP
I have an App Router project, (static export)
Trying to use notFound does not looks like tis working
Trying to use notFound does not looks like tis working
Answered by B33fb0n3
based on what you have, you have 2 dynamic parts. These dynamic parts need to be filled inside your method. So you define which pages you want to build.
If you are in
If you want to build this further, you can expand this for your other dynamic parts.
If you are in
You can see because you can define the array, you can build only the things, that you would like to have ðŸ‘
If you are in
app/[lang]/birthday/page.tsx and define your staticParams there you need to define only lang (because only lang is a dynamic part). so you need to return an array of objects, that contains the information, which dynamic parts for lang exists. For example like: [{lang: "de"}, {lang: "en"}, ...]If you want to build this further, you can expand this for your other dynamic parts.
If you are in
app/[lang]/[page]/page.tsx and define your staticParams there you need to define lang and page (because lang and page is a dynamic part). So you need to return an array of objects, that contains the information, which dynamic parts for lang and page exists. For example like: [{lang: "de", page: "birthday"}, {lang: "en", page: "birthday"}, {lang: "de", page: "team"}, {lang: "en", page: "team"}]You can see because you can define the array, you can build only the things, that you would like to have ðŸ‘
14 Replies
American SableOP
This is a page.tsx file
"use client";
// Components
import PagesActivities from "@components/PagesActivities/PagesActivities";
import { useConfig } from "@hooks/configContext";
// Utilities
import { notFound } from "next/navigation";
export default function BirthdayPartiesPage() {
const c = useConfig();
if (!c.pages.birthdayParties) {
notFound();
}
return (
<>
<PagesActivities />;
</>
);
}What I want to do:
I have a "template" and based on configuration (injected at build time)
I build multiple simillar websites.
So some of them does not have all the pages, so the goal is to render some pages and some not
I have a "template" and based on configuration (injected at build time)
I build multiple simillar websites.
So some of them does not have all the pages, so the goal is to render some pages and some not
Carolina Dog
I think notFound() doesnt work on client component. I think you have to do it on the server.
American SableOP
Is there a way to skip rendering a page completely? (Conditionally)
Maybe I could use an optional catch all and return [] ?
Note, this is at build time! Im doing static export
@American Sable you can use the [generateStaticParams](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) to statically say "only this and that page should build".
Here you can see how you example should look like:
Here you can see how you example should look like:
export async function generateStaticParams() {
const data = await fetch('https://.../yourDataEndpoint').then((res) => res.json())
// some conditional stuff to check if you want to have a specific page
return thePagesYouWantToHave
}American SableOP
For example I have 2 pages
app/[lang]/birthday/page.tsx
app/[lang]/team/page.tsx
I suppose to achieve what you say, I have to do:
app/[lang]/[page]/page.tsx
And based on the slug render the page
Right?
app/[lang]/birthday/page.tsx
app/[lang]/team/page.tsx
I suppose to achieve what you say, I have to do:
app/[lang]/[page]/page.tsx
And based on the slug render the page
Right?
based on what you have, you have 2 dynamic parts. These dynamic parts need to be filled inside your method. So you define which pages you want to build.
If you are in
If you want to build this further, you can expand this for your other dynamic parts.
If you are in
You can see because you can define the array, you can build only the things, that you would like to have ðŸ‘
If you are in
app/[lang]/birthday/page.tsx and define your staticParams there you need to define only lang (because only lang is a dynamic part). so you need to return an array of objects, that contains the information, which dynamic parts for lang exists. For example like: [{lang: "de"}, {lang: "en"}, ...]If you want to build this further, you can expand this for your other dynamic parts.
If you are in
app/[lang]/[page]/page.tsx and define your staticParams there you need to define lang and page (because lang and page is a dynamic part). So you need to return an array of objects, that contains the information, which dynamic parts for lang and page exists. For example like: [{lang: "de", page: "birthday"}, {lang: "en", page: "birthday"}, {lang: "de", page: "team"}, {lang: "en", page: "team"}]You can see because you can define the array, you can build only the things, that you would like to have ðŸ‘
Answer
American SableOP
I don't use generateStaticParams on pages under
But looks like the
[lang] cause the lang is generated on the top layout.But looks like the
[page] example should work, just need to extract each page as a component so its cleaner!that sounds great 😄
American SableOP
thanks!
please mark solution