Setup nex-i18next in dinamic pages

[Valyukhov]

I have configured next-i18next according to this example:
https://github.com/saltyshiomix/nextron/tree/main/examples/with-next-i18next
but maybe I didn't fully understand how to use dynamic routes with this configuration.
If i use

export async function getStaticPaths() {
  return { paths: [], fallback: "blocking" };
}

it breaks the app.

That's how it works well:

export async function getStaticPaths() {
  return { paths: [{ params: { locale: 'en', id: '1' }}], fallback: "blocking" };
}

it turns out that I need to get all the ids on the server.

I used it on the page, but I can't use it on the server function.
window.electronAPI.getProjects()
So I have to transfer all the code from here background.js ?

import Store from 'electron-store'
const storeProjects = new Store({ name: 'projects' })

ipcMain.on('get-projects', (event) => {
  const projects = storeProjects.get('projects') || []
  event.returnValue = projects
  event.sender.send('notify', 'Loaded')
})

[pixelass]

To clarify.

If you have dynamic pages, you have to fetch the dynamic values and generate static paths.

This is something that is well documented on Nextjs: https://nextjs.org/docs/pages/api-reference/functions/get-static-paths

[Valyukhov]

@pixelass is it possible to use the Next.js App Router in nextron?

[pixelass]

TL;DR | No
See here

Nextron expects a static build, so I recommend sticking to the pages/router concept. You can do static builds in the app directory but it's an overkill when the pages directory already takes care of 90% of the logic. The pages directory is perfect for electron apps.

@saltyshiomix is working on getting v14 compatibility but it will still rely on static files. That is actually not a nextron aspect but rather electron which was initially intended to run single page webapps as a native app and is opinionated to satisfy security standards.

There are ways to run a server. e.g. we run comfuyi (an AI image generation tool) as extension of our AI platfoprm. In that case we were able to rely on a webview: https://github.com/blib-la/captain/blob/932bc87f43e57ecb3ef6c9bcee858255591d9b26/src/client/pages/comfy-ui.tsx#L39-L44 but also offer an IPC pipeline to allow custom apps to communicate with the server.

But for you, it sounds like you want to run a server and just host it as your electron app. While you can definitely do that, it is not recommended for security reasons.
You should ask yourself these questions

1. Do I want to use electron and why?
2. Do I want to use next.js and why?
3. Which drawbacks are you willing to accept?

For us the answers were:

1. Yes, because we want to build mutli platforms with web technologies
2. Yes, because we have been using Next.js for several years
3. We can adjust our tooling so that it delivers the best product.

Those points concluded that Nextron offers an amazing starting point while we have to ensure that we build our app in a way that satisfies electron's expectations and recommendations.

I hope that helps.

[Valyukhov]

@pixelass
Thanks for the detailed answer.
And for your time.

The fact is that I use a file system to store data. And from this data I take dynamic routes using the electron library, for example from app.getPath('userData') But it looks like I won't be able to do this in getStaticPaths anymore. So I will look for another way.

[pixelass]

you can still build dynamic pages and render them on the client. there is no real advandage in relying on SSR.

e.g call your route with query parameters /en/my-dynamic-page?id=hellow-world

export default function Page() {
  const router = useRouter();

  return (
    <div>This is the page with ID: {route.query.id}</div>
  );
}

You could use SWR to fetch the data in some way:

export default function Page() {
  const router = useRouter();
  const { id } = router.query as string;
  // Assuming you have an exposed handler to retrieve page data
  const { data } = useSWR(["page", id], () => window.ipc.getPageData(id));


  return (
    <pre>{JSON.stringify(data, null, 2)</pre>
  );
}

We get data from our store this way: https://github.com/blib-la/captain/blob/932bc87f43e57ecb3ef6c9bcee858255591d9b26/src/electron/handlers.ts#L8-L25
or read files: https://github.com/blib-la/captain/blob/932bc87f43e57ecb3ef6c9bcee858255591d9b26/src/electron/handlers.ts#L43-L45

Think of IPC as your http API and build statically what is avaialable at build time. Dynamic content should be loaded dynamically at run time.