Passing Props to React Server Components

Explain how to pass props from a parent component to a child server component and how to use those props serverside within Next.js 14.
// ParentComponent.server.jsx
import ChildComponent from './ChildComponent.server.jsx';

export default function ParentComponent(props) {
  const parentData = 'Data from parent';
  // Here we pass parentData as a prop to the ChildComponent
  return <ChildComponent parentProp={parentData} />;
In a parent server component, import the child server component and pass the desired data as props while rendering the child component.
// ChildComponent.server.jsx
export default function ChildComponent({ parentProp }) {
  // Here we can use the parentProp that was passed from the ParentComponent
  return (
      <p>The prop passed from the parent is: {parentProp}</p>
In the child server component, receive the props from the parent component and use it within the component's render method.
// pages/_middleware.js
import { NextResponse } from 'next/server';

export async function middleware(request) {
  // Server-side logic before sending to the getServerSideProps or server components
If needed, set up a middleware for your Next.js application to handle server-side logic or authorization before rendering server components.
// pages/ExamplePage.jsx
import ParentComponent from '../components/ParentComponent.server.jsx';

export default function ExamplePage(props) {
  // Here you could have getServerSideProps or getStaticProps to fetch data
  // Then you render the ParentComponent server component like so:
  return <ParentComponent someProp={props.dataFromServer} />;
This is how you would use the ParentComponent server component within a page.