Walkthrough: Getting Reveal up and running in NextJS

[kenneho]

Hi.

As there's been a few discussions on how to get things up and running on NextJS, I though I'd share my notes on the matter.

1. Setup the new app with dependencies:

npx create-next-app@latest
cd <appname>
npm i reveal.js

2. Add file app/Presentation.tsx:

'use client'

import { useEffect } from 'react';
import Reveal from 'reveal.js';

import '/node_modules/reveal.js/dist/reveal.css';

export default function Presentation() {

    useEffect(() => {
        Reveal.initialize({
            controls: true,
            hash: true,
            margin: 0.1,
            display: true
        });
    }, []);

    return (
        <div className="reveal">
            <div className="slides">
                <section >
                    <h2>Slide 1</h2>
                    <p>First slide</p>
                </section>
                <section >
                    <h2>Slide 2</h2>
                    <p>Second slide</p>
                </section>
            </div>
        </div>
    )
}

3. Replace app/page.tsx with this content:

import dynamic from 'next/dynamic';
const Slide = dynamic(() => import('./Presentation'), { ssr: false, })

export default function Home() {
    return (
        <div style={{ height: '50rem', width: '50rem' }}>
            <Slide />
        </div>
    )
}

There, I believe that was it. Hopefully it will be of help for someone.

Btw, I though I wouldn't need dynamic import when Presentation had the use client directive, but importing directly caused a bunch of error messages in the server log.

[waterchinap]

Thanks a lot.
It is the most feasible way in my case.

just like this: #3473 (comment)
I have add a HighLight plugin to go through it.

[kenneho]

I should note that I kept having mics issues with Reveal, but moving everything from /app to /pages did the trick. The mix of server side and client side rendering wasn't worth it in my case.