layout.js

import './globals.css';

import Link from 'next/link';


export const metadata = {

  title: 'Tutorials',

  description: 'Generated by song',

}


export default async function RootLayout({ children }) {

  const res = await fetch('http://localhost:9999/topics');

  const topics = await res.json();

  return (

    <html>

      <body>

        <h1><Link href="/">WEB</Link></h1>

        <ol>

          {topics.map((topic)=>{

            return <li key={topic.id}><Link href={`/read/${topic.id}`}>{topic.title}</Link></li>

          })}

        </ol>

          {children}

          <ul>

            <li><Link href="/create">Create</Link></li>

            <li><Link href="/update">Update</Link></li>

            <li><Link href="/update/edit">Edit</Link></li>

            <li><input type="button" value='delete'/></li>

          </ul>

      </body>

    </html>

  )

}



Read/[id]폴더의 page.js

export default async function Read(props) {

const res = await fetch(`http://localhost:9999/topics/${props.params.id}`);

const topic = await res.json();

    return(

<>

<h2>title : {topic.title}</h2>

<p>{topic.body}</p>


</>

    )

}


여기서 page.js에서 props를 이용해서 props.params.id 하는데 layout.js에서는 props를 전달하는 부분이 없는데 대체 어디서 전달하는거임?

Link는 props전달이 아닌데