http://localhost:3000/api/preview/?secret=nuncaparesdeaprender&slug={entry.fields.slug}
Introducci贸n y requisitos para tomar el curso
驴C贸mo llevar Next.js a producci贸n?
Variables de entorno
驴Para qu茅 necesitamos variables de entorno?
Moviendo las llaves a variables de entorno
Llaves de alcance p煤blico (browser) y privadas (server)
Paquete cross-env y consideraciones en otros sistemas operativos
Im谩genes responsivas
Componente Image de Next.js
Image API: configurando nuestro propio loader avanzado
Router
Shallow navigation, router.query y data fetching
next/link y React refs
Prefetching de rutas
P谩ginas de error
Personalizando las p谩ginas de error 404 y 500
P谩ginas de errores avanzadas y c贸mo reusarlas
Preview Mode
CMS y Preview Mode
Configurando el Preview Mode en Contenful
Aceptando Preview Mode en nuestra App
As铆 se ve en nuestro CMS y App
Deploy
驴D贸nde puedo hacer deploy?
C贸mo hacer deploy a Vercel
Siguientes pasos
Contin煤a con el Curso de Next.js: Internacionalizaci贸n
You don't have access to this class
Keep learning! Join and start boosting your career
Configuring preview mode in Contentful is an essential process to ensure that developers can visualize changes before deploying them to production. This modern CMS facilitates this process by integrating secure tokens and the ability to communicate with multiple URLs. This educational tutorial will guide users through the configuration of the preview mode with clear examples and practical tips.
Content Preview is a Contentful feature that allows users to view and test changes to their content before publishing them. This mode communicates with the content generator, providing a preview based on the environment the CMS connects to.
Contentful login: Log in to your Contentful account and locate the configuration option for the preview mode.
Setup Content Preview: When you enter the preview section, you will be prompted for a name for the environment to be connected. This is usually a name representative of the development environment, such as dev
, for use with localhost
.
Entity and URL configuration:
entry.fields.slack
to designate specific fields in entries.In order to connect Contentful to your local development environment, follow these steps:
Define the connection URL: Use a local URL, such as http://localhost:3000,
where your server is running.
Build an API: Create a new API in Next.js under the slash API
path and name it preview
. This API will take care of enabling the preview mode.
Using query params:
// Example of using secrets and slack in URLs:const secret = "never stop learning";const slack = entry.fields.slack;
Tokens and API keys are critical components to ensure secure communications between Contentful and any external application. Make sure to:
With the Contentful and Next.js environment set up, the next step is to make this connection concrete in your Next.js application. In the next part of the development, you will implement the defined values to successfully enable the preview mode and ensure a smooth integration between Contentful and Next.js.
Keep exploring and learning to take your skills to the next level!
Contributions 1
Questions 0
http://localhost:3000/api/preview/?secret=nuncaparesdeaprender&slug={entry.fields.slug}
Want to see more contributions, questions and answers from the community?