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?
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>
</>
)
}