Slots Pattern for Component Flexibility in Next.js 14

Illustrate how to use the slots pattern to allow consumers of a component to inject content into predefined places.

import PropTypes from 'prop-types';

// Create a flexible component using slots pattern
const SlotComponent = ({ header, content, footer }) => (
  <div>
    <header>{header}</header>
    <main>{content}</main>
    <footer>{footer}</footer>
  </div>
);

SlotComponent.propTypes = {
  header: PropTypes.node,
  content: PropTypes.node,
  footer: PropTypes.node,
};

export default SlotComponent;

Defines a flexible 'SlotComponent' with slots for 'header', 'content', and 'footer'. PropTypes are used to ensure the slots receive the correct type of props.

import SlotComponent from './SlotComponent';

const Page = () => (
  <SlotComponent
    header={<h1>Page Title</h1>}
    content={<p>This is the main content of the page.</p>}
    footer={<small>&copy; 2023 Company Name</small>}
  />
);

export default Page;

Uses the 'SlotComponent' within a 'Page' component, passing React elements as props for each slot, injecting custom content into the predefined placeholders.