Next.js 13.4 SSG of page with password promt (SSG page with condition)

53 Views Asked by At

I use .mdx to store the content and pages are protected with a password prompt (a kind of condition). By visiting the page, it checks the cookie and if no cookie, it asks for the password. If the password is right - then it sets a cookie and shows the contents.

All works on dev, but not on the staging.

On the server, this works only with simple text, instead of .mdx content.

How to deal with this?

app/posts/[slug]/page.tsx

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

import { MDXRemote } from 'next-mdx-remote/rsc'

import { cookies } from 'next/headers'
import PasswordPromptDialog from '../../components/PasswordPromptDialog'

export async function generateStaticParams(){
    const files = fs.readdirSync(path.join('posts'))
    const paths = files.map(filename => ({
        slug: filename.replace('.mdx', '')
    }))
    return paths
}

function getPost({slug}: {slug: string}){
    const markdownFile = fs.readFileSync(path.join('posts', slug + '.mdx'), 'utf-8')
    const{data: frontMatter, content} = matter(markdownFile)
    return {
        frontMatter,
        slug,
        content
    }
}

export default function Page({ params } :any){
    const cookiesStore = cookies();
    const cookieName = String(process.env.PASSWORD_COOKIE_NAME)
    const isLoggedIn = cookiesStore.has(cookieName)
    const props = getPost( params);

    if (isLoggedIn) {
        return (
            <div className="max-w-container m-auto py-5">
                <article className='prose prose-sm md:prose-base lg:prose-lg prose-slate !prose-invert mx-auto'>
                    <h1 className='text-3xl font-semibold text-center'>{props.frontMatter.title}</h1>

                    <div className="text-lg">
                        <MDXRemote source={props.content} ></MDXRemote>
                    </div>
                </article>
            </div>
        )
    } else {
        return ( 
            <div className="max-w-container m-auto py-5">
                <PasswordPromptDialog />
            </div>
        )
    }
}

Server-side logs Server-side logs

0

There are 0 best solutions below