building portfolio in nextjs

SEO & Deployment

Chapter 9

2 min read

To ensure your portfolio is discoverable and fast, we’ll implement the Next.js Metadata API and deploy via Vercel, the platform built by the creators of Next.js.

1. Global & Dynamic SEO

Next.js 15 uses a centralized Metadata API to manage the <head> of your pages. This is crucial for search rankings and social media previews.

A. Root Metadata (src/app/layout.tsx) Set up a title template so your branding remains consistent across all pages.

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  metadataBase: new URL('https://yourportfolio.com'), // Required for OG images
  title: {
    default: 'Alex | Full Stack Developer',
    template: '%s | Alex Portfolio',
  },
  description: 'Showcasing high-performance web applications built with Next.js.',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://yourportfolio.com',
    siteName: 'Alex Portfolio',
  },
};

B. Dynamic Metadata (src/app/portfolio/[slug]/page.tsx) For project pages, use generateMetadata to fetch the project’s specific title and description from your MDX frontmatter.

export async function generateMetadata({ params }): Promise<Metadata> {
  const project = await getProject(params.slug);
  return {
    title: project.title,
    description: `Case study for ${project.title}`,
  };
}

2. Deployment on Vercel

Vercel provides zero-config support for Next.js features like Image Optimization and Server Actions

Step-by-Step Launch:

Push to Git: Upload your project to GitHub, GitLab, or Bitbucket.
Import to Vercel: Log in to the Vercel Dashboard and click "Add New Project".
Environment Variables: If you used services like Resend for your Contact Form, add your API keys in the "Environment Variables" section during setup.
Deploy: Click "Deploy." Vercel will automatically build your app and provide a live URL (e.g., your-project.vercel.app).

3. Post-Deployment Checklist

Custom Domain: Connect your personal domain in Settings > Domains.
Analytics: Enable Vercel Analytics to track page views and Core Web Vitals.
Instant Previews: Every time you push a new branch, Vercel generates a unique Preview Deployment URL for testing.

import { Metadata } from 'next'; export const metadata: Metadata = { metadataBase: new URL('https://yourportfolio.com'), // Required for OG images title: { default: 'Alex | Full Stack Developer', template: '%s | Alex Portfolio', }, description: 'Showcasing high-performance web applications built with Next.js.', openGraph: { type: 'website', locale: 'en_US', url: 'https://yourportfolio.com', siteName: 'Alex Portfolio', }, };

export async function generateMetadata({ params }): Promise<Metadata> { const project = await getProject(params.slug); return { title: project.title, description: `Case study for ${project.title}`, }; }