"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { br: "br", code: "code", em: "em", h1: "h1", h2: "h2", hr: "hr", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Building a Server-Rendered Portfolio with Next.js, MDX, NextAuth, and Prisma" }), "\n", _jsxs(_components.p, { children: ["A good portfolio shouldn’t feel like a slideshow — it should feel like software.", _jsx(_components.br, {}), "\n", "I wanted something fast, dynamic, and expressive: a personal site that actually ", _jsx(_components.em, { children: "does" }), " things."] }), "\n", _jsxs(_components.p, { children: ["This post walks through how I built a ", _jsx(_components.strong, { children: "server-side rendered (SSR)" }), " portfolio using ", _jsx(_components.strong, { children: "Next.js" }), ", ", _jsx(_components.strong, { children: "MDX" }), ", ", _jsx(_components.strong, { children: "NextAuth" }), ", ", _jsx(_components.strong, { children: "Prisma" }), ", and the ", _jsx(_components.strong, { children: "GitHub API" }), "."] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "What I Wanted to Build" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Fast, SEO-friendly pages:" }), " Every page is rendered on the server (SSR-first)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Authentication:" }), " Real database-backed login with NextAuth and Prisma."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Blog:" }), " Markdown and JSX (MDX) for flexible posts with syntax-highlighted code."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Projects:" }), " Live data pulled from the GitHub API."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Resume:" }), " A downloadable PDF generated on demand."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Minimal JS:" }), " Mostly server components, styled with Tailwind."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "The Tech Stack" }), "\n", _jsxs(_components.p, { children: ["| Layer | Tech | Purpose |\n|-------|------|----------|\n| Framework | ", _jsx(_components.strong, { children: "Next.js 14+" }), " | App Router with Server Components |\n| Database | ", _jsx(_components.strong, { children: "Prisma ORM" }), " | SQLite (dev) → Postgres (prod) |\n| Auth | ", _jsx(_components.strong, { children: "NextAuth v4" }), " | Credentials provider + Prisma adapter |\n| Content | ", _jsx(_components.strong, { children: "mdx-bundler + Shiki" }), " | MDX posts with syntax highlighting |\n| UI | ", _jsx(_components.strong, { children: "Tailwind CSS" }), " | Lightweight and flexible styling |\n| PDF | ", _jsx(_components.strong, { children: "@react-pdf/renderer" }), " | Stream PDFs from a route |\n| Data | ", _jsx(_components.strong, { children: "GitHub REST API" }), " | Fetch live repo data for ", _jsx(_components.code, { children: "/projects" }), " |"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Folder Layout" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "src/\n app/\n about/page.tsx\n admin/\n comments/page.tsx\n post/\n create/page.tsx\n edit/page.tsx\n page.tsx\n api/\n admin/\n comments/\n [id]/route.ts\n route.ts\n posts/\n create/route.ts\n delete/route.ts\n edit/route.ts\n route.ts\n auth/\n [...nextauth]/route.ts\n register/route.ts\n blog/\n [slug]/route.ts\n route.ts\n categories/route.ts\n comments/route.ts\n tags/route.ts\n blog/\n [slug]/page.tsx\n page.tsx\n contact/\n thank-you/page.tsx\n page.tsx\n legal/\n privacy/page.tsx\n terms/page.tsx\n login/page.tsx\n projects/page.tsx\n resume/page.tsx\n error.tsx\n globals.css\n layout.tsx\n page.tsx\n components/\n CommentForm.tsx\n DeletePostModal.tsx\n Footer.tsx\n Header.tsx\n Hero.tsx\n mdx.tsx\n MDXContent.tsx\n Providers.tsx\n RepoCard.tsx\n ThemeProvider.tsx\n ThemeSwitch.tsx\n lib/\n auth.ts\n github.ts\n prisma.ts\n rateLimit.ts\n utility.ts\n utils.ts\n types/\n mdx.d.ts\n next-auth.d.ts\n middleware.ts\nprisma/schema.prisma\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Environment Variables" }), "\n", _jsxs(_components.p, { children: ["Create a ", _jsx(_components.code, { children: ".env" }), " file:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ini", children: "DATABASE_URL=\"file:./dev.db\"\nNEXTAUTH_SECRET=\"changeme\"\nNEXTAUTH_URL=\"http://localhost:3000\"\n\n# Optional for higher GitHub API rate limits\nGITHUB_TOKEN=\"\"\nGITHUB_USERNAME=\"your-github-username\"\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Prisma Schema" }), "\n", _jsxs(_components.p, { children: ["I used NextAuth’s built-in tables (via the Prisma Adapter) plus a simple ", _jsx(_components.code, { children: "Comment" }), " model:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-prisma", children: "model Comment {\n id String @id @default(cuid())\n slug String\n authorId String?\n author User? @relation(fields: [authorId], references: [id])\n body String\n createdAt DateTime @default(now())\n}\n" }) }), "\n", _jsx(_components.p, { children: "Bootstrap your database:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx prisma generate\nnpx prisma migrate dev --name init\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Authentication with NextAuth + Prisma" }), "\n", _jsxs(_components.p, { children: ["Here’s the core setup (", _jsx(_components.code, { children: "src/lib/auth.ts" }), "):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import type { NextAuthOptions } from \"next-auth\";\nimport { getServerSession } from \"next-auth\";\nimport CredentialsProvider from \"next-auth/providers/credentials\";\nimport { PrismaAdapter } from \"@auth/prisma-adapter\";\nimport bcrypt from \"bcrypt\";\nimport { prisma } from \"@/lib/prisma\";\n\nexport const authOptions: NextAuthOptions = {\n adapter: PrismaAdapter(prisma),\n session: { strategy: \"database\" },\n providers: [\n CredentialsProvider({\n name: \"Credentials\",\n credentials: {\n username: { label: \"Username\", type: \"text\" },\n password: { label: \"Password\", type: \"password\" },\n },\n async authorize(credentials) {\n const username = credentials?.username?.trim();\n const password = credentials?.password || \"\";\n if (!username || !password) return null;\n\n const user = await prisma.user.findFirst({ where: { username } });\n if (!user || !user.password) return null;\n\n const ok = await bcrypt.compare(password, user.password);\n if (!ok) return null;\n\n return { id: String(user.id), name: user.username, email: user.email };\n },\n }),\n ],\n callbacks: {\n async session({ session, user }) {\n if (session.user) (session.user as any).id = user.id;\n return session;\n },\n },\n secret: process.env.NEXTAUTH_SECRET,\n};\n\nexport function auth() {\n return getServerSession(authOptions);\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "MDX Blog System" }), "\n", _jsxs(_components.p, { children: ["Each post lives in ", _jsx(_components.code, { children: "src/content/posts" }), " with frontmatter and Markdown + JSX (MDX)."] }), "\n", _jsx(_components.p, { children: "Example post:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mdx", children: "---\ntitle: Hello, World\ndate: 2025-01-01\nexcerpt: Kicking off the MDX blog.\n---\n\nWelcome to the new site. This content is rendered **server-side** using `mdx-bundler` and highlighted with Shiki.\n" }) }), "\n", _jsx(_components.p, { children: "Post loader:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// src/lib/mdx.ts\nimport path from \"node:path\";\nimport fs from \"node:fs/promises\";\nimport matter from \"gray-matter\";\nimport { bundleMDX } from \"mdx-bundler\";\nimport remarkGfm from \"remark-gfm\";\n\nconst POSTS_DIR = path.join(process.cwd(), \"src/content/posts\");\n\nexport async function getPostSlugs() {\n const files = await fs.readdir(POSTS_DIR);\n return files.filter((f) => f.endsWith(\".mdx\")).map((f) => f.replace(/\\.mdx$/, \"\"));\n}\n\nexport async function getPostBySlug(slug: string) {\n const file = await fs.readFile(path.join(POSTS_DIR, `${slug}.mdx`), \"utf8\");\n const { content, data } = matter(file);\n const result = await bundleMDX({\n source: content,\n mdxOptions(options) {\n options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkGfm];\n return options;\n },\n });\n return { code: result.code, frontmatter: data as any };\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Projects Page (SSR + Live GitHub Data)" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// src/lib/github.ts\nexport async function fetchRepos(username: string) {\n const headers: HeadersInit = { Accept: \"application/vnd.github+json\" };\n if (process.env.GITHUB_TOKEN) headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;\n const res = await fetch(\n `https://api.github.com/users/${username}/repos?sort=updated&per_page=100`,\n { headers, next: { revalidate: 3600 } }\n );\n if (!res.ok) throw new Error(`GitHub: ${res.status}`);\n const repos = (await res.json()) as any[];\n return repos.filter((r) => !r.fork);\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Resume PDF Streaming" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// src/app/resume/download/route.ts\nimport { NextResponse } from \"next/server\";\nimport ReactPDF, { Document, Page, Text } from \"@react-pdf/renderer\";\nimport { resume } from \"@/lib/resume-data\";\n\nexport async function GET() {\n const Doc = (\n \n \n {resume.name}\n {resume.title}\n {resume.summary}\n \n \n );\n const stream = await ReactPDF.renderToStream(Doc);\n return new NextResponse(stream as any, {\n headers: {\n \"Content-Type\": \"application/pdf\",\n \"Content-Disposition\": \"attachment; filename=resume.pdf\",\n },\n });\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Tailwind Setup" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Tailwind v4" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i -D tailwindcss @tailwindcss/postcss postcss autoprefixer\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// postcss.config.mjs\nexport default {\n plugins: {\n \"@tailwindcss/postcss\": {},\n autoprefixer: {},\n },\n};\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Tailwind v3" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i -D tailwindcss@3 postcss@8 autoprefixer@10\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "export default {\n plugins: { tailwindcss: {}, autoprefixer: {} }\n};\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Deployment Notes" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.strong, { children: "Postgres" }), " in production (SQLite is for dev only)."] }), "\n", _jsxs(_components.li, { children: ["Add rate limiting to ", _jsx(_components.code, { children: "/api/comments" }), "."] }), "\n", _jsxs(_components.li, { children: ["Set ", _jsx(_components.code, { children: "runtime = \"nodejs\"" }), " for routes using native modules (like bcrypt or React PDF)."] }), "\n", _jsx(_components.li, { children: "Prefer server components; use client ones only for forms or interactivity." }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Closing Thoughts" }), "\n", _jsxs(_components.p, { children: ["The result is a ", _jsx(_components.strong, { children: "fully server-rendered, dynamic portfolio" }), " that behaves like a real app:", _jsx(_components.br, {}), "\n", "authenticated features, a maintainable blog, live GitHub data, and a downloadable resume."] }), "\n", _jsx(_components.p, { children: "It’s fast, simple to maintain, and feels genuinely alive — not just a static page with a few animations." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Building a Web Experience: Creating the Bluedot Website

Comments