Gestión del Modo Preview en Next.js con APIs y React
Clase 16 de 19 • Curso de Next.js: Optimización y Deploy a Producción
Contenido del curso
Fabian David Dueñas Garcia
student•
hace 5 años
Clase 16 de 19 • Curso de Next.js: Optimización y Deploy a Producción
Contenido del curso
Fabian David Dueñas Garcia
Cesar González Caballero
Andres Eduardo Maneiro Antunez
Ulqernesh Karvenae
con el hook de useRouter tambien podemos saber si estamos en preview mode con la propiedad isPreview.
const router = useRouter(); router.isPreview
exit.ts
import { NextApiHandler } from 'next' const PreviewStatus: NextApiHandler = (request, response) => { response.json({ preview: request.preview ?? false, context: request.previewData, }) } export default PreviewStatus
status.ts
import { NextApiHandler } from 'next' const PreviewStatus: NextApiHandler = (request, response) => { response.json({ preview: request.preview ?? false, context: request.previewData, }) } export default PreviewStatus
copiaste dos veces lo mismo
este es el codigo de exit.ts para los que lo necesiten
import { NextApiHandler } from 'next' const exitPreview: NextApiHandler = (_, response) => { // Exit the current user from "Preview Mode". response.clearPreviewData() // 307 (temporary) redirect to homepage response.redirect('/') response.end() } export default exitPreview
PreviewModeBanner.tsx
import { useEffect, useState } from 'react' import { Button } from '@ui/Button' import { Alert } from '@ui/Alert' type PreviewStatusResponse = { preview: boolean context: Json } | null export function PreviewModeBanner() { const [isEnabled, setIsEnabled] = useState(false) useEffect(() => { try { fetch('/api/preview/status') .then((response) => response.json()) .then((data: PreviewStatusResponse) => { setIsEnabled(data?.preview || false) }) } catch (e) { // ignore } }, []) if (!isEnabled) { return null } return ( <div className="fixed right-0 bottom-16 w-md transform translate-x-2/3 hover:translate-x-0 z-10 transition-transform duration-300"> <Alert variant="filled" severity="warning" action={ <Button variant="text" color="inherit" href="/api/preview/exit"> Disable preview mode </Button> } > <div className="max-w-md">Preview mode is enabled</div> </Alert> </div> ) }