Contenido del curso
Gestión del Modo Preview en Next.js con APIs y React
Comando: git checkout -b dev 5-preview-mode
Fabian David Dueñas Garcia
Estudiante
Cesar González Caballero
Estudiante
Andres Eduardo Maneiro Antunez
Estudiante
Ulqernesh Karvenae
Estudiantecon 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> ) }
