Next.js Discord

Discord Forum

pure client side page

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
We have an app that needs to be built and exported to be used with capacitor JS as a native iOS/Android App.
In this App, we have a listing of articles that change every day. So we need to use dynamic routing to access those articles.
We are not able to set "use client" on the page without getting an error: "Page "/issue/[reader]" is missing "generateStaticParams()" so it cannot be used with "output: export" config." However we can not use generateStaticParams() because we do not know the articles ahead of time... and Dynamic Routes with dynamicParams: true is not supported for static exports.
Is it really impossible to have a pure client-side page (We know about the downsides of a client-only page this and are willing to accept them)
Thank you!

11 Replies

New Guinea Singing Dog
Maybe add a export dynamic parameter? I had some issues when it was stuck on SSG 
export const dynamic = 'force-dynamic'
American black bearOP
Unfortunately not. We are still getting errors.
Page with dynamic = "force-dynamic" couldn't be rendered statically because it used output: export. See more info here: https://nextjs.org/docs/advanced-features/static-html-export
We need the whole tree to be dynamic/client-side...
😕
New Guinea Singing Dog
What have you configured you next config.js to look like?
American black bearOP
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

module.exports = {
  output: "export",
  webpack(config, options) {
    const { isServer } = options;
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      exclude: config.exclude,
      use: [
        {
          loader: require.resolve("url-loader"),
          options: {
            limit: config.inlineImageLimit,
            fallback: require.resolve("file-loader"),
            publicPath: `${config.assetPrefix}/_next/static/images/`,
            outputPath: `${isServer ? "../" : ""}static/images/`,
            name: "[name]-[hash].[ext]",
            esModule: config.esModule || false,
          },
        },
      ],
    });

    return config;
  },
  images: {
    domains: ["picsum.photos", "app.direct.app"],
    loader: "custom",
    loaderFile: "./src/lib/directImageLoader.js",
    remotePatterns: [
      {
        protocol: "https",
        hostname: "app.direct.app",
        port: "",
      },
    ],
  },
};
American black bearOP
my-app/
├─ src/
│  ├─ app/
│  │  ├─ page_foo/
│  │  ├─ [reader]/
│  │  │  ├─ page.js  <-- These routes will change daily
│  │  ├─ page_bar/
New Guinea Singing Dog
Yeah your 
module.exports = { 
  output: "export",
}

Is what is causing the issue, its telling Next JS when building to convert everything to a static page and then just use that for deployment
If your page is going to change daily, you can't have it as a static page because it needs to be rerendered
American black bearOP
That's right.
But because we need to use capacitor js to convert our app to native ios/android we have to export our app.
In the nextJS docs it says:
Good to know
You can use the dynamicParams segment config option to control what happens when a dynamic segment is visited that was not generated with generateStaticParams.
https://nextjs.org/docs/app/api-reference/functions/generate-static-params
That's why we thought it would be possible to opt out of static rendering for specific routes. 😕
Cape lion
@American black bear Hi, I just wonder if your AppRouter next.js works well with Capacitor? Is there any downside except the above issue?
American black bearOP
If you stick to the basic stuff, everything works fine.
Because our content was not SEO relevant we hacked our way though with searchParams instead of dynamic Routes. But if SEO is important, I would not recommend this.