@contentful/live-preview
Advanced tools
@contentful/live-preview - npm Package Compare versions
Comparing version 2.0.2 to 2.1.0
| { | ||
| "name": "@contentful/live-preview", | ||
| "version": "2.0.2", | ||
| "version": "2.1.0", | ||
| "author": "Contentful GmbH", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -234,2 +234,4 @@ # @contentful/live-preview | ||
| You can find an example implementation in the [examples/nextjs](./examples/nextjs/) folder. | ||
| To use the Contentful Live Preview SDK with [Next.js](https://nextjs.org), you can either use one of the Contentful starter templates, or do the following steps to add it to an existing project. | ||
@@ -263,3 +265,3 @@ | ||
| This provides the posibility to only enable live updates and the inspector mode inside the preview mode: | ||
| This provides the possibility to only enable live updates and inspector mode inside draft mode: | ||
@@ -271,3 +273,3 @@ ```tsx | ||
| const CustomApp = ({ Component, pageProps }) => ( | ||
| <ContentfulLivePreviewProvider locale="en-US" enableInspectorMode={pageProps.previewActive} enableLiveUpdates={pageProps.previewActive}> | ||
| <ContentfulLivePreviewProvider locale="en-US" enableInspectorMode={pageProps.draftMode} enableLiveUpdates={pageProps.draftMode}> | ||
| <Component {...pageProps}> | ||
@@ -305,3 +307,3 @@ </ContentfulLivePreviewProvider> | ||
| > It doesn't matter if the data is loaded with getServerSideProps, getStaticProps or if you load it in any other way.<br>It's necessary that the provided information to `useContentfulLiveUpdate` contains the `sys.id` for identifation and only non-transformed fields can be updated.<br>(For GraphQL also the `__typename` needs to be provided) | ||
| > It doesn't matter if the data is loaded with getServerSideProps, getStaticProps or if you load it in any other way.<br>It's necessary that the provided information to `useContentfulLiveUpdate` contains the `sys.id` for identification and only non-transformed fields can be updated.<br>(For GraphQL also the `__typename` needs to be provided) | ||
@@ -324,9 +326,9 @@ **Tip:** If you want to tag multiple fields of an entry, you can also provide initial arguments to the hook: | ||
| 4. Enable preview mode | ||
| 4. Enable draft mode | ||
| We suggest using the [preview mode](https://nextjs.org/docs/advanced-features/preview-mode) and the [Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/) for the best experience. | ||
| We suggest using the [draft mode](https://nextjs.org/docs/pages/building-your-application/configuring/draft-mode) and the [Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/) for the best experience. | ||
| For a full guide checkout this [free course](https://www.contentful.com/nextjs-starter-guide/) | ||
| 5. In Contentful, define the preview environment and configure the preview URL for your Next.js application. Once you open an entry with a configured preview URL, you can use the live preview and all its features. | ||
| 5. In Contentful, configure the draft URL for your Next.js application in the Content preview settings. Once you open an entry with a configured preview URL, you can use the live preview and all its features. | ||
@@ -333,0 +335,0 @@ That's it! You should now be able to use the Contentful live preview SDK with Next.js. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.02%
380403
- Number of lines in readme file
- increased by0.45%
442