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>
)
}
}