Структура проекта
├── app/
│ ├── [work]/
│ │ └── page.js
│ ├── works/
│ │ ├── work1.js
│ │ ├── work2.js
│ │ └── work3.js
├── next.config.mjs
Вот /[work]/page.js
import Work1 from "../works/Work1";
import Work2 from "../works/Work2";
import Work3 from "../works/Work3";
export function generateStaticParams() {
return [
{ id: "work-1" }
{ id: "work-2" }
{ id: "work-3" }
]:
}
export default function WorkPage({ params }) {
const { id } = params;
// const work = params.work; <- If I use "work" below it works fine
const project = (id) => {
switch (id) {
case "work-1":
return <Work1 />;
case "work-2":
return <Work2 />;
case "work-3":
return <Work3 />;
default:
return <h1>Something went wrog.</h1>;
}
};
return <div>{project(id)}</div>;
}
и вот мой nexjs.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
reactStrictMode: true,
images: { unoptimized: true },
};
export default nextConfig;
Когда я запускаю npm run dev
, я получаю это сообщение об ошибке:
Ошибка: на странице «/[work]/page» отсутствует параметр «/work-1» в «generateStaticParams()», который необходим для конфигурации «output: Export».
Очевидно, проблема заключалась в том, что папка называется [work] и в функцииgenerateStaticParams я использовал «id» — это свойство должно совпадать со значением, которое вы используете в папке, поэтому в этом случае
export async function generateStaticParams() {
return [
{ work: "work-1" },
{ work: "work-2" },
{ work: "work-3" },
];
}
а затем используйте его вот так
export default function WorkPage({ params }) {
const { work } = params;
let WorkComponent;
if (work === "work-1") {
WorkComponent = Work1;
} else if (work === "work-2") {
WorkComponent = Work2;
} else if (work === "work-3") {
WorkComponent = Work3;
} else {
WorkComponent = () => <div>Work not found</div>;
}
return (
<div>
<h1>Work Page for {work}</h1>
<WorkComponent />
</div>
);
}