Full-Stack Development with Next.js: Building Modern Web Applications

Next.js has revolutionized full-stack development by providing a unified framework for both frontend and backend development. With its powerful features like server-side rendering, API routes, and automatic code splitting, it's become the go-to choice for modern web applications.

// API Route Example
// pages/api/users/[id].js
export default async function handler(req, res) {
  const { id } = req.query;
  
  if (req.method === 'GET') {
    try {
      const user = await getUserById(id);
      res.status(200).json(user);
    } catch (error) {
      res.status(404).json({ error: 'User not found' });
    }
  } else if (req.method === 'PUT') {
    try {
      const updatedUser = await updateUser(id, req.body);
      res.status(200).json(updatedUser);
    } catch (error) {
      res.status(400).json({ error: 'Failed to update user' });
    }
  } else {
    res.setHeader('Allow', ['GET', 'PUT']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

API routes in Next.js provide a clean way to build backend functionality without needing a separate server. They integrate seamlessly with your frontend code and support all HTTP methods.

Server-Side Rendering (SSR)

One of Next.js's most powerful features is its built-in SSR capabilities. This improves SEO, initial page load performance, and provides better user experience, especially on slower networks.

The framework offers multiple rendering strategies: Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR), each optimized for different use cases.

// Static Generation with getStaticProps
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  
  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

// Server-Side Rendering with getServerSideProps
export async function getServerSideProps({ req, res }) {
  const user = await getUserFromRequest(req);
  
  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  
  return {
    props: {
      user,
    },
  };
}

These data fetching methods allow you to choose the right rendering strategy for each page, balancing performance with data freshness requirements.

Database Integration

Next.js works seamlessly with various databases and ORMs. Whether you're using Prisma, MongoDB, PostgreSQL, or any other database, the framework provides excellent integration patterns.

1. Use Prisma for type-safe database access
2. Implement connection pooling for performance
3. Cache frequently accessed data with Redis
4. Use database transactions for data consistency
5. Implement proper error handling and logging

Proper database integration ensures your application remains performant and reliable as it scales to handle more users and data.

// Database connection with Prisma
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Reuse connection in development
if (process.env.NODE_ENV === 'development') {
  global.prisma = global.prisma || prisma;
}

export default process.env.NODE_ENV === 'development' ? global.prisma : prisma;

// Usage in API route
// pages/api/posts/index.js
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const posts = await prisma.post.findMany({
      include: {
        author: true,
        comments: true,
      },
    });
    res.json(posts);
  }
}

This pattern ensures efficient database connections and provides type safety throughout your application, reducing runtime errors and improving developer experience.

Deployment and Performance

Next.js applications can be deployed to various platforms, with Vercel providing the most seamless experience. The framework's built-in optimizations, including automatic code splitting and image optimization, help create fast, efficient applications.

Building full-stack applications with Next.js combines the power of React with the convenience of integrated backend functionality. By leveraging its features effectively, you can create modern, performant web applications that scale with your needs.