Basic usage

import hydrate from '@dpdk/library/utilities/prismic/hydrate';

function Home() {
  return <h1>Welcome to your page</h1>;
}

export default hydrate(Home);
Copy

import hydrate from '@dpdk/library/utilities/prismic/hydrate';

// Slice with props that match the parameters from the CMS
function Hero({ hero_title, hero_subtitle, hero_image, initialProps }) {
  return (<.../>);
}

// Slices can also have an additional .getInitialProps
// Data returned from this function will be available through the `initialProps` parameter
// 
Hero.getInitialProps = async () => {
  return { hello: 'world' };
}

// Static slices that don't have any CMS props, but can have initialProps
function HeaderSlice() {
  return <h1>Nice title</h1>;
}
function ContentSlice() {
  return <p>Some content</p>;
}

// `children` in props are the specified slices
function Home({ children }) {
  return (
    <>
      <Menu />
      {children}
      <Footer />
    </>
  );
}

export default hydrate(Home, [
  // The order here is important, in this case we want the header first
  HeaderSlice,
  // A single object can be provided in the slices array
  // This object will match our slices in code with the CMS
  // The position of the object in the array will match with the page
  {
    hero: Hero
  },
  // Other slices below the dynamic slices
  ContentSlice,
  ContentSlice
]);
Copy