I have most of my dev experience doing React Native in expo, so I am becoming acquainted with React, Tailwind, and Next, all within the past day or two, so I may not use all the correct vocabulary, or may easily be missing something critical/basic.

As in the title, and shown in the gif screenrecording of my devtools, it seems like a new <link /> with the styles is getting added every couple seconds. More specifically, the previous preload tag gets removed, a new link tag gets added, alongside a new preload tag.

Looking at the numbers at the end of the hrefs, each pair of new link and preload link tag has almost the same number. In the gif, it should be that the preload href is one less than the link. If I just let it sit on the page long enough though, it eventually grows, becoming 2 less, and so on.

This isn't happening with any other pages/routes in what the app has so far. I don't currently have the directory set up this way, but at one point I had, inside the profile folder, a page.jsx which just pointed directly to the page.jsx of the publicProfile, and when routing to /profile, the issue did not occur, but when routing to /profile/whatever, the issue did occur. So, I am led to conclude there is something wrong with the way I am using the dynamic+parallel routing, and/or my layout.tsx file.

layout.tsx file highlighted in screenshot of directory:

import { type ReactNode } from 'react'

// TODO
export default function ProfileLayout({
  privateProfile,
  publicProfile,
}: {
  privateProfile: ReactNode
  publicProfile: ReactNode
}) {
  // temporary
  const userID = 'coffee'
  const getUser = () => 'coffee'
  const editable = userID === getUser()
  return (
    <div className='items-center justify-center px-4'>
      test
      {editable ? privateProfile : publicProfile}
    </div>
  )
}

While troubleshooting, I tried to include the children prop in the layout, but this caused an issue for some reason. I wonder if there's a larger issue?