Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Dynamic page does not export with nextJS static export, output: export

I have a problem to export a route in my nextJS 14 project. I’m using output: export. Every routes are exporting fine expect the one with dynamic routes. The folder does not appear in the out folder

I’m using next 14.0.3

Does someone know how to solve this?

yarn build shows that the page in question : leslessives is rendered dynamically :

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

Here is my 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)

Here the route in question. page.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>
    </>
  )
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this by using useEffect and useState to fetch the datas. But for that I needed to use q client component. Not sure about the real impact of this change

     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()
  }, [])

  2. 0

    You need to use getStaticPaths to tell Next.js which dynamic routes to pre-render. Combine this with getStaticProps to fetch the data for each page at build time

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search