Next.js 14.2.4 генерирует ошибку генерацииStaticParams

Структура проекта

├── 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».

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
133
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Очевидно, проблема заключалась в том, что папка называется [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>
  );
}

Другие вопросы по теме