building portfolio in nextjs

Lighthouse Performance & Blogging

Chapter 10

3 min read

To reach a 100/100 Lighthouse score, we need to optimize our assets and rendering strategies. Simultaneously, we'll leverage our existing MDX setup to add a Blog Section for sharing technical insights.

1. Achieving a Perfect Lighthouse Score

Next.js provides several built-in optimizations to improve your Core Web Vitals.

Image Optimization: Ensure every image uses the next/image component with priority for Hero images to improve Largest Contentful Paint (LCP).
Font Optimization: Use next/font to automatically self-host Google Fonts, eliminating external network requests and layout shifts.
Script Loading: Move non-critical scripts (like Analytics) to next/script with the afterInteractive or lazyOnload strategy.

Example: Optimized Fonts (src/app/layout.tsx)

import { Inter } from 'next/font/google';
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

2. Adding the Blog Section

Since we already built an MDX loader for projects, we can reuse that logic for a blog.

Step A: Directory Structure Create a new folder to separate blog posts from project case studies.

src/content/
├── projects/
└── blog/
    ├── nextjs-performance-tips.mdx
    └── mastering-scss-modules.mdx

Step B: The Blog Index Page (src/app/blog/page.tsx) Fetch all posts and display them in a list, sorted by date.

export default async function BlogPage() {
  const posts = await getAllBlogPosts(); // Fetch from src/content/blog
  
  return (
    <main className="container">
      <h1>Technical Insights</h1>
      <div className="blog-list">
        {posts.map(post => (
          <article key={post.slug}>
            <Link href={`/blog/${post.slug}`}>
              <h2>{post.title}</h2>
              <time>{post.date}</time>
            </Link>
          </article>
        ))}
      </div>
    </main>
  );
}

3. Implementing RSS Feeds

For a technical blog, an RSS feed is essential for readers using aggregators like Feedly. You can generate this during the build process using a simple script in generateStaticParams.

// Example: Basic RSS generation logic
import { Feed } from 'feed';
 
export async function generateRssFeed() {
  const posts = await getAllBlogPosts();
  const feed = new Feed({
    title: "Alex's Blog",
    description: "Web development and design insights.",
    id: "https://yourportfolio.com",
    link: "https://yourportfolio.com",
    copyright: `All rights reserved ${new Date().getFullYear()}`,
  });
 
  posts.forEach(post => {
    feed.addItem({
      title: post.title,
      link: `https://yourportfolio.com{post.slug}`,
      date: new Date(post.date),
    });
  });
 
  return feed.rss2();
}

Final Architecture Check

SSR for fast initial loads.

MDX for content flexibility.

SCSS Modules for scoped, maintainable styles.

Server Actions for secure form handling.

Vercel for global edge deployment.

import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], display: 'swap', }); export default function RootLayout({ children }) { return ( <html lang="en" className={inter.className}> <body>{children}</body> </html> ); }

export default async function BlogPage() { const posts = await getAllBlogPosts(); // Fetch from src/content/blog return ( <main className="container"> <h1>Technical Insights</h1> <div className="blog-list"> {posts.map(post => ( <article key={post.slug}> <Link href={`/blog/${post.slug}`}> <h2>{post.title}</h2> <time>{post.date}</time> </Link> </article> ))} </div> </main> ); }

// Example: Basic RSS generation logic import { Feed } from 'feed'; export async function generateRssFeed() { const posts = await getAllBlogPosts(); const feed = new Feed({ title: "Alex's Blog", description: "Web development and design insights.", id: "https://yourportfolio.com", link: "https://yourportfolio.com", copyright: `All rights reserved ${new Date().getFullYear()}`, }); posts.forEach(post => { feed.addItem({ title: post.title, link: `https://yourportfolio.com{post.slug}`, date: new Date(post.date), }); }); return feed.rss2(); }