# next-slicezone

> A component that maps other components to Prismic slices

Latest version **0.2.6** (published 2022-04-08) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install next-slicezone
pnpm add next-slicezone
yarn add next-slicezone
bun add next-slicezone
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.6 |
| Published | 2022-04-08 |
| First published | 2020-06-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 80.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 305 |
| Author | Hugo Villain |
| Maintainers | sprite, hypervillain, amaurycahuet, lihbr |
| Keywords | Reactjs, Prismic, slices |

## Links

- npm: https://www.npmjs.com/package/next-slicezone
- Repository: https://github.com/prismicio/sm-commons
- Homepage: https://github.com/prismicio/sm-commons#readme
- Issues: https://github.com/prismicio/sm-commons/issues
- npm.io page: https://npm.io/package/next-slicezone

## Dependencies (2)

- [slash](https://npm.io/package/slash.md) ^3.0.0
- [sm-commons](https://npm.io/package/sm-commons.md) 0.1.6

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.2.6 (latest) — 2022-04-08
- 0.2.7-alpha.2 (alpha) — 2022-04-12
- 0.1.3-beta.3 (beta) — 2021-11-24
- 0.2.7-alpha.1 — 2022-04-11
- 0.2.7-alpha.0 — 2022-04-08
- 0.2.6-alpha.5 — 2022-04-08
- 0.2.6-alpha.4 — 2022-04-08
- 0.2.6-alpha.3 — 2022-04-07
- 0.2.6-alpha.2 — 2022-04-06
- 0.2.6-alpha.1 — 2022-04-05
- 0.2.6-alpha.0 — 2022-04-01
- 0.2.5 — 2022-03-30
- 0.2.5-alpha.12 — 2022-03-30
- 0.2.5-alpha.11 — 2022-03-30
- 0.2.5-alpha.10 — 2022-03-29
- … 147 more at https://npm.io/package/next-slicezone/versions

## README

# Next SliceZone

A component that fetches Prismic files, returns slices found and matches them with front-end components.

RFC: https://github.com/prismicio/slice-machine/issues/7

## Fetching content

Next SliceZone exports 2 functions that are designed to help you quickly get all static paths of a NextJS given route, fetch associated documents on Prismic, and return slices found there.

### useGetStaticProps

`useGetStaticProps` can be used in every page using the SliceZone.
It's responsible for:

- fetching content from Prismic
- returning a pre-written Next `getStaticProps`

#### Page example

Query a singleton page of type "homepage"

```javascript
import { Client } from "../prismic";
import { useGetStaticProps } from "next-slicezone/hooks";
import resolver from "../sm-resolver";

const Page = ({ uid, slices }) => (
  <SliceZone resolver={resolver} slices={slices} />
);

export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: "homepage", // query document of type "page"
  queryType: "single", // homepage is a singleton document
});

export default Page;
```

#### Properties

`useGetStaticProps` takes a params object as argument.

| Param                | Type     | Required | Default value | Description                                                                     | Example value               |
| -------------------- | -------- | -------- | ------------- | ------------------------------------------------------------------------------- | --------------------------- |
| apiParams            | object   | false    | null          | Object passed to client `apiOptions`.                                           | { lang: 'fr-fr' }           |
| client               | function | true     | null          | Pass a Prismic client here                                                      | Prismic.client(apiEndpoint) |
| slicesKey            | string   | false    | body / slices | Key of slices array in API response (`doc.data[slicesKey]`)                     | 'MySliceZone'               |
| type                 | string   | false    | page          | Custom type to be queried                                                       | 'another_cts'               |
| queryType            | string   | false    | repeat        | One of 'repeat' or 'single', to switch between `getByUID` and `getSingle` calls | 'single'                    |
| getStaticPropsParams | object   | false    | null          | Object passed to return object of `getStatcProps`                               | { revalidate: true }        |

#### Example with API Params

Your API calls might depend on other factors in your app, for example the language the user talks. Pass an `apiParams` object or function to transform your call to the Prismic API.

```javascript
const PageInFrench = ({ uid, slices }) => (
  <SliceZone resolver={resolver} slices={slices} />
);

export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: "homepage", // query document of type "page"
  queryType: "single", // homepage is a singleton document
  apiParams: {
    lang: "fr-fr",
  },
});

export default PageInFrench;
```

👆 `apiParams` can also be a function! See example below

### useGetStaticPaths

`useGetStaticPaths` should be used _in each dynamic page_ that relies on the SliceZone.
It's responsible for:

- fetching documents by type on Prismic
- formatting params passed to getStaticProps

#### Page example (`/pages/[lang]/[uid]`)

Query a repeatable type "page" in a language based on URL parameter.

```javascript
import { useGetStaticProps, useGetStaticPaths } from "next-slicezone/hooks";

const Page = ({ uid, slices, data }) => (
  <div>
    <h1>{data.keyTextTitle}</h1>
    <SliceZone resolver={resolver} slices={slices} />
  </div>
);

export const getStaticProps = useGetStaticProps({
  type: "page",
  queryType: "repeat",
  apiParams({ params }) {
    // params are passed by getStaticPaths
    return {
      lang: params.lang,
      uid: params.uid,
    };
  },
});

// fetch all docs of type `MyPage` and pass params accordingly
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: "page",
  formatPath: (prismicDocument) => {
    return {
      params: {
        uid: prismicDocument.uid,
        lang: prismicDocument.lang,
      },
    };
  },
});

export default Page;
```

#### Properties

`useGetStaticPaths` takes a params object as argument.
Refer to [Next docs](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) to understand what's expected from `formatPath`.

| Param      | Type     | Required | Default Value | Description                                               | Example                       |
| ---------- | -------- | -------- | ------------- | --------------------------------------------------------- | ----------------------------- |
| type       | -        | -        | -             | Same as useGetStaticProps                                 | -                             |
| apiParams  | -        | -        | -             | Same as useGetStaticProps                                 | -                             |
| client     | -        | -        | -             | Same as useGetStaticProps                                 | -                             |
| formatPath | function | true     | (doc) => null | Function to format Next path argument. Pass null to skip. | ({uid}) =>({ params:{ uid }}) |

### SliceZone

Once slices have been fetched server-side, we need to get all slices found and match them with your components.

To display the right content, the SliceZone takes as parameters
props passed at build time by `useGetStaticProps`. Notably:

- `slices`, the array data components fetched from Prismic
- `resolver`, a function that resolves calls to components from the SliceZone
- `sliceProps`, an object or function that passes props to matched slices

#### Example SliceZone

```
const Page = ({ data, slices }) => (
    <SliceZone
        slices={slices}
        resolver={resolver}
        sliceProps={({ slice, sliceName, i }) => ({
           theme: i % 1 ? 'light' : 'dark',
           alignLeft: data.keyTextTitle?.length > 35
        })}
)

```

The resolver function can be generated for you and should be everytime you make a change to your slices structure (rename, add, delete a slice, add a library...). To do this, create a `pages/_document` file and add the `createResolver` method to its `getInitialProps` method:

#### Example \_document file

```javascript
import Document, { Html, Head, Main, NextScript } from "next/document";
import { createResolver } from "next-slicezone/resolver";

export default class extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    /* In development, generate an sm-resolver.js file
    that will map slices to components */
    if (process.env.NODE_ENV === "development") {
      await createResolver();
    }
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

---
_Source: https://npm.io/package/next-slicezone · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._