CODEWITHSUNDEEP
next.jscapacitor
Moorthy G
Moorthy G

Reputation: 1541

Next.js static export with dynamic routes

I'm developing a web application using Next.js, which includes a CMS for updating pages. The goal is to leverage the same web application codebase to create native iOS and Android apps using a WebView container technology like Capacitor (https://capacitorjs.com/).

Currently, the web application is hosted on a Next.js server, and it handles dynamic routes seamlessly. However, when exporting the Next.js app to static HTML for the native app, we encounter challenges with dynamic routes and content updates.

One potential solution is to create a separate plain React app specifically for the native mobile applications.

Are there any alternative approaches to effectively address the issue of handling dynamic routes in the Next.js static export for the native apps?

PS: I'm using app directory for routes

Upvotes: 2

Views: 1754

Answers (1)

Santosh Karanam
Santosh Karanam

Reputation: 1217

Static nextJs apps cannot create dynamic pages, The pages are already compiled and static html js files are generated. I faced same issue and fixed it using query parameters.

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

https://nextjs.org/docs/app/api-reference/functions/use-search-params

if there is no query params, then load list, else the specific page.

Upvotes: 2

Related Questions