Integrating NeonTech PostgreSQL with Next.js Portfolio

If you’ve ever wanted to build a personal portfolio site that does more than just sit pretty - like fetch real-time project data, blogs, or even stats - then you'll need a solid database behind it. For my Next.js site (saket-portfolio), I went with NeonTech - a fully managed, serverless PostgreSQL service that made setup surprisingly smooth.

Here’s how I did it - and why I think it’s worth considering for your next full-stack project.

---

🧠 Why NeonTech PostgreSQL?

Let’s be honest - spinning up and managing a database isn't exactly fun. But NeonTech PostgreSQL caught my attention for a few reasons:

• Serverless PostgreSQL → no need to worry about provisioning or scaling
• Free tier → more than enough for a personal site (10 GB storage + 10k requests/day)
• Modern features → like branching, point-in-time restore, and blazing fast cold starts
• SSL out-of-the-box → works great with Vercel, where my site is hosted

Basically, it's PostgreSQL, but way more modern and developer-friendly.

---

⚙️ Setting Up NeonTech PostgreSQL

1.Create a Neon account at neon.tech
2.Create a new project and database - I named mine saket_portfolio
3.Grab the PostgreSQL connection string. It’ll look something like this:

  postgres://username:password@ep-something.neon.tech/dbname?sslmode=require

Keep this safe. We’ll need it in our .env.local.

---

📦 Installing Dependencies

In my Next.js project, I installed the official PostgreSQL client:

npm install pg

This gives us everything we need to talk to the database from the backend.

---

🔐 Setting Up Environment Variables

Add your Neon connection string to .env.local:

DATABASE_URL=postgres://username:password@ep-something.neon.tech/dbname?sslmode=require

Make sure this file is in .gitignore - you definitely don’t want this public.

---

🧩 Creating a DB Client

To keep things clean, I created a reusable database client inside lib/db.ts:

// lib/db.ts
import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false,
  },
});

export default pool;

---

🔄 Creating an API Route to Fetch Projects

Now let’s get real. Say you have a projects table - here’s how you can fetch that data using an API route:

// pages/api/projects.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import pool from '@/lib/db';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { rows } = await pool.query('SELECT * FROM projects ORDER BY created_at DESC');
    res.status(200).json(rows);
  } catch (error) {
    console.error('DB Error:', error);
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

---

💻 Displaying the Projects on Frontend

You can now fetch your project data in a component:

'use client';
import { useEffect, useState } from 'react';

const Projects = () => {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    fetch('/api/projects')
      .then((res) => res.json())
      .then((data) => setProjects(data));
  }, []);

  return (
    <section>
      {projects.map((proj) => (
        <div key={proj.id} className="border p-4 rounded-xl mb-4">
          <h2 className="text-xl font-bold">{proj.title}</h2>
          <p>{proj.description}</p>
        </div>
      ))}
    </section>
  );
};

export default Projects;

---

🧪 Sample SQL Table

Just getting started? You can create a simple projects table using this SQL:

CREATE TABLE projects (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

INSERT INTO projects (title, description) VALUES
('Next.js Portfolio', 'My personal portfolio using Next.js and TailwindCSS'),
('Blog Engine', 'Blogging system powered by Neon and Markdown content');

Use Neon's built-in SQL Editor or connect via a GUI like TablePlus or DBeaver.

---

🌍 Deploying on Vercel

When you push this to Vercel, make sure to add DATABASE_URL under your project’s environment variables in the Vercel dashboard.

That’s it - it just works. 🎉

---

🚀 What’s Next?

Now that Neon is connected, you can go further:

• ✅ Use Drizzle ORM for type-safe database access and easier schema migrations
• ✅ Add ISR (Incremental Static Regeneration) for SEO - friendly dynamic pages that stay fresh
• ✅ Leverage Neon Branching to test schema changes without touching production

Each of these will take your full-stack setup to the next level - and I’ll be writing dedicated blogs on them soon.

---

🧠 Final Thoughts

NeonTech PostgreSQL + Next.js is a powerful stack - especially for developers who want modern tools without managing old-school infrastructure. I’ve now got a portfolio that not only looks good but can scale easily, and adding new features like blogs, stats, or admin tools is a breeze.

If you’re building something cool and need a solid database - give NeonTech PostgreSQL a spin. You might just love it.