Theo's Typesafe Cult•2y ago

[Solved] Dynamically generated NavLinks have weird behavior on ISR

I've got a page on https://ambushfall-next13-app.vercel.app/ where I dynamically generate the navlinks under layouts with the following code

  const reg = /^([^.]+)$/g;
  const appDirectory = path.join(process.cwd(), '/app');
  const appFilenames = await fs.readdir(appDirectory)
  const filterDirectories = appFilenames.filter((e) => e.match(reg) ? e !== 'components' && e !== 'api' && e !== 'github' : false)

  const reg = /^([^.]+)$/g;
  const appDirectory = path.join(process.cwd(), '/app');
  const appFilenames = await fs.readdir(appDirectory)
  const filterDirectories = appFilenames.filter((e) => e.match(reg) ? e !== 'components' && e !== 'api' && e !== 'github' : false)

This works fine, however, the /projects path upon reload will cause the navlinks to disappear and only home+projects will be visible. Does anyone have the faintest idea of what I'm doing wrong?

1 Reply

AmbushfallOP•2y ago

Note: This works fine in dev Not in prod Issue resolved Moving the logic from layouts.tsx to a prebuild step that generates JSON, then importing that JSON sorted out the issue. For anyone interested: prebuild.js

const fs = require('fs/promises')
const path = require('path')

async function run() {
    const reg = /^([^.]+)$/g;
    const appDirectory = path.join(process.cwd(), '/app');
    const appFilenames = await fs.readdir(appDirectory)
    const filterDirectories = appFilenames.filter((e) => e.match(reg) ? e !== 'components' && e !== 'api' && e !== 'github' && e !== 'editor' : false)

    // console.log(filterDirectories)

    const obj = new Object({ hrefs: filterDirectories })
    console.log(obj)
    fs.writeFile("paths.json", JSON.stringify(obj), function (err) {
        if (err) throw err;
        console.log('complete');
    }
    );
}

run()

const fs = require('fs/promises')
const path = require('path')

async function run() {
    const reg = /^([^.]+)$/g;
    const appDirectory = path.join(process.cwd(), '/app');
    const appFilenames = await fs.readdir(appDirectory)
    const filterDirectories = appFilenames.filter((e) => e.match(reg) ? e !== 'components' && e !== 'api' && e !== 'github' && e !== 'editor' : false)

    // console.log(filterDirectories)

    const obj = new Object({ hrefs: filterDirectories })
    console.log(obj)
    fs.writeFile("paths.json", JSON.stringify(obj), function (err) {
        if (err) throw err;
        console.log('complete');
    }
    );
}

run()

then importing into layouts using:

import { hrefs } from 'paths.json'

...


const filterDirectories = data['hrefs']
{filterDirectories?.map((item: string, index:number) => <NavLinkTailwind key={index} href={`/${item}`} NavItemName={item} />)}

import { hrefs } from 'paths.json'

...


const filterDirectories = data['hrefs']
{filterDirectories?.map((item: string, index:number) => <NavLinkTailwind key={index} href={`/${item}`} NavItemName={item} />)}

Works without any quirky behavior, hope this helps someone someday

Gaming

Programming

[Solved] Dynamically generated NavLinks have weird behavior on ISR