Adding New Pages or Sections

How to create new routes, pages, and homepage sections in BloggFast.

Last updated: April 12, 2026

Adding a new page

Create a new page.tsx file in the appropriate location under src/app/:

src/app/about/page.tsx

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn about our team and mission.',
}

export default function AboutPage() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="font-display text-4xl font-bold">About Us</h1>
      <p className="mt-4 text-gray-600">Your about page content goes here.</p>
    </main>
  )
}

The page is now accessible at /about. Add a link to the NavBar if needed.

Adding a homepage section

Create a new component file in src/components/
Import and add it to src/app/page.tsx in the desired position

src/app/page.tsx

import { NewSection } from '@/components/NewSection'

export default function Home() {
  return (
    <>
      <NavBar />
      <main className="lg:ml-64">
        <Hero />
        <NewSection />  {/* ← add here */}
        <WhyBloggFast />
        {/* ... */}
      </main>
    </>
  )
}

Adding API routes

Add new API endpoints by creating route.ts files under src/app/api/:

src/app/api/hello/route.ts

import { NextResponse } from 'next/server'

export async function GET() {
  return NextResponse.json({ message: 'Hello from BloggFast!' })
}