动态页面不使用nextJS静态导出导出，输出：export

Question

我在 nextJS 14 项目中导出路线时遇到问题。我正在使用输出：导出。除具有动态路由的路由外，每条路由都导出良好。该文件夹没有出现在out文件夹中

我正在使用下一个14.0.3

有人知道如何解决这个问题吗？

yarn 构建显示相关页面：leslessives 是动态渲染的：

Route (app)                              Size     First Load JS
┌ ○ /                                    153 kB          301 kB
├ ○ /_not-found                          870 B            85 kB
├ ○ /api/health                          0 B                0 B
├ ○ /conditions-generales-d-utilisation  1.28 kB        98.6 kB
├ ○ /ideesetconseils                     174 B          89.3 kB
├ ○ /lamarque                            25.2 kB         170 kB
├ λ /leslessives                         1.32 kB        97.5 kB
├ ● /leslessives/[id]                    1.11 kB        92.2 kB
├   ├ /leslessives/9
├   ├ /leslessives/39
├   ├ /leslessives/23
├   └ [+2 more paths]
├ ○ /mentions-legales                    1.28 kB        98.6 kB
├ ○ /politique-de-confidentialite        1.28 kB        98.6 kB
└ ○ /reglement                           1.17 kB        98.5 kB
+ First Load JS shared by all            84.2 kB
  ├ chunks/472-31075e7adf75b534.js       28.9 kB
  ├ chunks/fd9d1056-986279e933d4449d.js  53.3 kB
  ├ chunks/main-app-ff928e97f8293f3b.js  219 B
  └ chunks/webpack-4ec394a0e95e81fb.js   1.78 kB


○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
λ  (Dynamic)  server-rendered on demand using Node.js

这是我的 next.config.mjs:

import withBundleAnalyzer from "@next/bundle-analyzer"
import withPlugins from "next-compose-plugins"
import { env } from "./env.mjs"

/**
 * @type {import('next').NextConfig}
 */
const config = withPlugins([[withBundleAnalyzer({ enabled: env.ANALYZE })]], {
  output: "export",
  trailingSlash: true,
  reactStrictMode: true,
  experimental: { instrumentationHook: true },
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: "https",
        hostname: "admin.heritagefrance.fr",
        port: "",
        pathname: "/uploads/**/*",
      },
      {
        protocol: "http",
        hostname: "127.0.0.1",
        port: "1337",
        pathname: "/uploads/**/*",
      },
      {
        protocol: "https",
        hostname: "placehold.co",
      },
    ],
  },
  env: {
    NEXT_PUBLIC_STRAPI_URL: "https://admin.heritagefrance.fr/api",
    NEXT_STRAPI_MEDIA_URL: "https://admin.heritagefrance.fr",
    HOTJAR_ID: process.env.HOTJAR_ID,
    IMPROOV_URL: process.env.IMPROOV_URL,
    IMPROOV_TOKEN: process.env.IMPROOV_TOKEN,
  },
  webpack: (config) => {
    config.resolve.alias.canvas = false

    return config
  },
})

export default config
console.log("Next.js config:", config)

这里是有问题的路线。页.tsx:

import { getPagesData, getStrapiData } from "app/api/api"
import { StrapiImage } from "@/components/Images/StrapiImage"
import Products from "@/components/Products/products"

export default async function Web() {
  const products = await getStrapiData("/api/products")
  const hero = await getPagesData("/api/nos-produit")

  return (
    <>
      {/* Section Hero */}
      <section className="max-w-screen-desk relative mx-auto mt-24 items-center justify-center text-red lg:px-32">
        <div className="mx-6 flex flex-col-reverse gap-11 lg:grid lg:grid-cols-2">
          <div className="max-w-2xl self-center">
            <h1 className="text-5xl font-extrabold uppercase lg:text-6xl">{hero.title}</h1>
            <p className="max-w-xl text-lg">{hero.description}</p>
          </div>
          <div className="w-full">
            <StrapiImage
              src={hero.heroImage.url}
              width={hero.heroImage.width}
              height={hero.heroImage.height}
              alt="hero image"
            />
          </div>
        </div>
      </section>
      <section className="max-w-screen-desk mb-24 lg:mx-auto">
        <Products products={products.data} />
      </section>
    </>
  )
}

Answer 1

您需要使用 getStaticPaths 告诉 Next.js 哪些动态路由要预渲染。将此与 getStaticProps 结合起来，在构建时获取每个页面的数据

Answer 2

我通过使用 useEffect 和 useState 来获取数据解决了这个问题。但为此我需要使用 q 客户端组件。不确定此更改的真正影响

 const [products, setProducts] = useState<StrapiData | null>(null)
  const [hero, setHero] = useState<PagesData | null>(null)

  useEffect(() => {
    async function fetchData() {
      try {
        const productsData = await getStrapiData("/api/products")
        const heroData = await getPagesData("/api/nos-produit")
        setProducts(productsData)
        setHero(heroData)
      } catch (error) {
        console.error("Error fetching cards data:", error)
      }
    }
    fetchData()
  }, [])