Full-stack App in half a Day: Next.js 15 Development Bootcamp

Next.js 15
Development
Bootcamp
Maurice de Beijer
@mauricedb

© ABL - The Problem Solver 3
 Maurice de Beijer
 The Problem Solver
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: https://www.theproblemsolver.dev/
 E-mail: maurice.de.beijer@gmail.com

Topics
 Why use Next.js
 Creating a new Next.js application
 Generating a landing page using Vercel V0
 Adding a Postgres SQL database using Docker
 Adding the Prisma ORM with the database schema
 Seeding the database with data
 Adding client-side interactions and state
 Deploying the application to Vercel

Type it out
by hand?
“Typing it drills it into your brain much better
than simply copying and pasting it. You're
forming new neuron pathways. Those
pathways are going to help you in the future.
Help them out now!”

Prerequisites
Install Node, NPM & Docker

Install
Node.js &
NPM

VS Code

Or Cursor

Following
Along
 Repo: https://github.com/mauricedb/next-15-bootcamp
 Slides:
https://www.theproblemsolver.dev/docs/next-15-bootcamp.pdf

The changes

The
application

Why use Next.js 15

Why use
Next.js

Why use
Next.js
 React 19 Support
 It provides full compatibility with React 19, giving you
access to the latest React features like Server Components
improvements, enhanced Suspense behavior, and better
concurrent rendering capabilities.
 React Server Components
 Server Components have been refined with better
streaming support, improved error boundaries, and more
predictable behavior, making it easier to build applications
that render efficiently on the server.
 Great Developer Experience
 The development server is faster with better hot module
replacement. The framework includes enhanced error
messages, better debugging tools, and improved
TypeScript integration that makes development more
productive.

Why use
Next.js
 Enhanced App Router
 The App Router continues to mature with better
performance, more stable APIs, and improved data fetching
patterns. This gives you more flexibility in how you
structure and render your applications.
 Performance Improvements
 Next.js 15 introduces significant performance
optimizations, including better bundle splitting, improved
tree shaking, and enhanced caching mechanisms.
 It supports partial prerendering (PPR) as a stable feature,
allowing you to combine static and dynamic content more
efficiently.
 Turbopack Integration
 Next.js 15 includes better integration with Turbopack
(Webpack's successor), providing faster build times and
more efficient bundling, especially for larger applications.

Creating a new
Next.js application

Creating a new
Next.js
application
 Creating a new project using a wizard with a
questionnaire
 npx create-next-app@latest

Creating a new
Next.js
application
 Creating a project based on a Vercel Next.js example
 npx create-next-app@latest my-app1 --example
with-styled-components
 See https://github.com/vercel/next.js/tree/canary/examples
 Create a new project based on another example
 npx create-next-app@latest my-app1 --example
https://github.com/mui/material-ui/tree/master
/examples/material-ui-nextjs-ts

Creating a
new
Shadcn/Next
.js
application
 When using Shadcn/ui there is a shortcut
 npx shadcn@latest init

Creating a new
Next.js
application

Creating a
new Next.js
application

Generating a
landing page using
Vercel V0

Generating a
landing page
using Vercel
V0
 Rapid prototyping with complete projects
 Generates full Next.js applications with proper folder structure,
configuration, and git setup that you can immediately download and
run locally
 Modern Next.js best practices built-in
 Uses the latest App Router, Server Actions, TypeScript, and Tailwind CSS
automatically, keeping your code current with framework standards
 Real-time interactive development
 Preview and test your application instantly in the browser while making
changes through natural language prompts, no local setup required
 Production-ready code quality
 Generates clean, well-organized code following industry best practices
rather than throwaway prototypes, with integrated shadcn/ui
components
 Accessible to non-developers
 Enables designers, product managers, and entrepreneurs to build
functional web applications using plain English descriptions rather than
requiring deep coding knowledge

The Prompt

Generating a
landing page
using Vercel
V0

Add to
codebase
 npx shadcn@latest add
"https://v0.dev/chat/b/b_uCxq9uwB2Qu"

Placeholder
image
 Note: the placeholder image is not added to the project
 https://github.com/mauricedb/next-15-bootcamp/blob/mai
n/public/placeholder.svg

Generating a
landing page
using Vercel
V0

Using shared
layouts

Using shared
layouts
 Consistent UI structure across pages
 Layout components allow you to define shared elements like headers,
navigation, and footers once and automatically apply them to multiple pages,
ensuring a cohesive user experience throughout your application.
 Reduced code duplication
 Instead of importing and wrapping the same layout components in every page
file, you can define the layout once and have it automatically wrap all pages in
that route segment, leading to cleaner and more maintainable code.
 Improved performance through persistent state
 Layout components remain mounted when navigating between pages that
share the same layout, preserving component state and avoiding unnecessary
re-renders of common UI elements like navigation menus or sidebars.
 Hierarchical layout composition
 The App Router's nested layout system allows you to create sophisticated layout
hierarchies where different route segments can have their own layouts that
compose together, enabling complex page structures with minimal code.
 Better SEO and metadata management
 Layouts provide a centralized place to define page metadata, title templates,
and other SEO-related elements that should be consistent across sections of
your site, making it easier to maintain proper search engine optimization.

Using shared
layouts

Break time

Rendering movie
cards

Rendering
movie cards
 We want the user of the app to be able to pick movies to
compare
 We will use Vercel V0 again to generate the components
 For now, we will use some hard coded data

Rendering
movie cards

Rendering
movie cards
"https://v0.dev/chat/b/b_uCxq9uwB2Qu"

Rendering
movie cards

Adding a Postgres
SQL database using
Docker

Why use
Docker?
 Environment consistency
 Every developer on your team gets exactly the same database version,
configuration, and extensions, eliminating "works on my machine"
issues that plague traditional local installations.
 Zero installation complexity
 Skip the headache of installing Postgres natively, managing system
services, or dealing with permission issues. One docker run command
gets you a fully functional database.
 Isolated and disposable
 Each project can have its own containerized database that won't
interfere with other projects or your system. When you're done, simply
delete the container with no leftover files or configurations.
 Resource control
 Easily limit memory and CPU usage for your development database,
preventing it from consuming too many system resources during
intensive operations.
 Quick reset capabilities
 Corrupted data or need a fresh start? Destroy and recreate your
database container in seconds rather than manually
dropping/recreating schemas or reinstalling software.

Adding a
Postgres SQL
database

Adding the Prisma
ORM

Adding the
Prisma ORM

Adding the
Prisma ORM
 Type Safety Throughout
 Prisma generates TypeScript types automatically from your
database schema, ensuring complete type safety from
database queries to your Next.js components, eliminating
runtime errors from type mismatches.
 Seamless API Route Integration
 Prisma's query syntax works perfectly in Next.js API routes,
server components and server actions, providing clean
database operations without complex SQL or connection
management overhead.
 Excellent Developer Experience
 Prisma Studio provides a visual database browser, while the
Prisma CLI offers schema migration tools and database
seeding capabilities that streamline development workflow.
 Database Agnostic Flexibility
 Switch between PostgreSQL, MySQL, SQLite, MongoDB, and
other databases without changing your application code,
making it easy to adapt to different deployment environments.

Adding the
Prisma ORM
 Optimized for Modern Next.js Features
 Works seamlessly with App Router, Server Components, and
React Server Components, allowing you to fetch data
directly in components without additional API layers.
 Built-in Connection Pooling
 Handles database connections efficiently, particularly
important in serverless Next.js deployments where
connection management can be challenging.
 Powerful Migration System
 Prisma Migrate tracks schema changes and generates
migration files automatically, making database versioning
and deployment straightforward across different
environments.
 Query Optimization and Caching
 Provides query result caching and includes tools to analyze
and optimize database performance, crucial for Next.js
applications that need fast response times.

Adding the
Prisma ORM

Adding the
Prisma ORM
(Next.js)

Adding the
database schema

Adding the
database
schema
 Prisma database schemas
 Prisma uses a schema.prisma file as a single source of truth
that defines your database structure, models, and
relationships in a declarative format.
 This schema serves as the foundation for Prisma's code
generation, allowing it to automatically create type-safe client
code that matches your exact database structure.
 Migrations are created in development to do schema
updates
 prisma migrate dev --name <migration name>
 Migrations are executed in production to update the
production DB
 prisma migrate deploy

Adding the
database
schema

Seeding the
database

Seeding the
database
 Consistent Development Environment
 Database seeding ensures all developers on your team start with the
same baseline data, eliminating inconsistencies that can cause bugs
to appear on some machines but not others and making debugging
more predictable across different development setups.
 Faster Feature Development and Testing
 Having realistic sample data immediately available allows developers
to test user interfaces, business logic, and edge cases without
manually creating test records every time they reset their local
database or onboard new team members.
 Automated Deployment Pipeline Integration
 Seed scripts can be integrated into your CI/CD pipeline to populate
staging and testing environments with known data sets, enabling
automated testing scenarios and providing consistent environments
for QA teams to validate features.
 Realistic Data Relationships and Volume
 Well-designed seed data includes proper foreign key relationships,
realistic data volumes, and edge cases that mirror production
scenarios, helping identify performance issues and relationship
problems early in development rather than after deployment.

Seeding the
database

Break time

Using data from the
DB

Using data
from the DB
 Direct Database Queries in Components
 Server components allow you to write Prisma database queries directly inside React
components that render on the server, eliminating the need for separate API routes
or data fetching layers for many common use cases like displaying lists or detail
pages.
 Async Component Rendering
 React 19 server components can be async functions, meaning you can use await
directly in component code to fetch data from Prisma before rendering, making data
fetching feel more natural and reducing the complexity of managing loading states
for initial page loads.
 Improved Performance and SEO
 Since Prisma queries execute on the server and components render with data already
available, pages load faster with complete HTML content, improving SEO and
eliminating the "loading spinner then content" pattern that hurts user experience
and search rankings.
 Reduced Client-Server Roundtrips
 Server components with embedded Prisma queries eliminate the need for separate
API calls after page load, reducing network requests and improving perceived
performance, especially for data that doesn't need to be dynamically updated on the
client.
 Simplified Error Handling and Security
 Database connection strings and Prisma client configuration remain server-side only,
improving security while allowing you to handle database errors closer to where
queries are executed rather than managing error states across API boundaries.

Server vs
Client
Components
 Server Components by Default
 In React 19 with Next.js app router, components are server components by default,
meaning they render on the server during build time or request time, have access to
server-side resources like databases and file systems, and cannot use browser-specific
APIs or event handlers.
 Client Component Declaration
 To create a client component that runs in the browser, you must add the 'use client'
directive at the very top of your component file before any imports, which tells React to
hydrate and run this component on the client side with full interactivity.
 Interactivity and State Management
 Client components can use React hooks like useState, useEffect, and event handlers like
onClick, while server components cannot use any interactive features, browser APIs, or
state management since they only exist during server rendering.
 Bundle Size and Performance Trade-offs
 Server components don't add to your JavaScript bundle size since they render on the
server, while client components increase bundle size and require hydration, so you should
only mark components as client components when interactivity is actually needed.
 Data Fetching Patterns
 Server components can directly access databases, APIs, and server resources during
rendering, while client components must fetch data through client-side methods like
fetch() calls to API routes or external endpoints after the component mounts.
 Component Composition Rules
 Server components can import and render client components, but client components
cannot directly import server components, though server components can be passed as
props or children to client components for flexible architectures.

Using data
from the DB

Adding client-side
interactions and
state
Using Valtio - Proxy state made simple 

Adding
client-side
interactions
and state
 Proxy-Based Reactivity
 Valtio uses JavaScript proxies to automatically track state mutations and re-render
components only when the specific data they access changes, eliminating the need for
manual dependency arrays or complex state update patterns that can cause unnecessary re-
renders.
 Mutable State Updates
 Unlike Redux or Zustand, Valtio allows you to directly mutate state objects using familiar
JavaScript syntax like state.user.name = 'John', making state updates feel natural and reducing
boilerplate code while still maintaining React's reactivity principles.
 Minimal Boilerplate and Learning Curve
 Valtio requires very little setup code and uses intuitive APIs that feel like working with plain
JavaScript objects, making it easier for developers to adopt compared to more complex state
management solutions that require actions, reducers, or special update functions.
 Automatic Optimization
 The library automatically optimizes re-renders by tracking which properties each component
accesses, so components only update when their specific data dependencies change, leading
to better performance without manual optimization efforts like memoization or selector
functions.
 TypeScript Integration
 Valtio provides excellent TypeScript support with full type inference for state objects and
mutations, ensuring type safety across your application while maintaining the simple
mutable API that makes the library appealing.
 Flexible State Architecture
 You can organize state into multiple proxy objects for different domains of your application,
share state across components easily, and even subscribe to state changes outside of React
components for integration with other libraries or side effects.

Adding
client-side
interactions
and state

Comparing movies

Comparing
movies
 We want the user of the app to be able to compare
movies
 We will use Vercel V0 again to generate the page
 The generated components will use generated data
 We will need to hook it up with the Valtio store

Comparing
movies

Comparing
movies
"https://v0.dev/chat/b/b_jwu1vRBKFBo"

Comparing
movies

Disabling the
/compare route

Disabling the
/compare
route
 Prevent Empty State Confusion
 Disabling the compare route when no movies are selected
prevents users from landing on a blank or confusing page
that doesn't provide any value, eliminating the need to
handle empty state UI and reducing user frustration with
dead-end navigation.

Disabling the
/compare
route

Deploying the
database to the
cloud

Deploying
the database
to the cloud
 Self-managed on Cloud VMs (DigitalOcean, Linode)
 Provides maximum control and potentially lower costs for high-usage
scenarios, but requires significant database administration expertise for
maintenance, security, and optimization tasks.
 Managed Cloud Services (AWS, Google, Azure)
 Major cloud providers offer fully managed PostgreSQL with automated
backups, patching, and scaling, but require more configuration and
typically have higher costs with traditional instance-based pricing models.
 Neon
 Provides serverless PostgreSQL with automatic scaling, database
branching for development workflows, and a generous free tier, making it
ideal for modern applications that need flexible compute resources
without infrastructure management.
 Supabase
 Combines PostgreSQL with a full backend-as-a-service platform including
real-time subscriptions, authentication, and auto-generated APIs, perfect
for developers who want a complete backend solution beyond just the
database.
 And many more
 Heroku, Aiven, Exoscale, etc …

Using Neon
 Serverless Architecture
 Neon provides a serverless PostgreSQL platform that automatically scales
compute resources up and down based on demand, eliminating the need
to manage server infrastructure or worry about capacity planning.
 Instant Database Creation
 You can create a new PostgreSQL database in seconds through Neon's
web console or CLI, with no complex setup or configuration required - just
sign up and start building immediately.
 Branching for Development
 Neon offers Git-like database branching that allows you to create isolated
database copies for development, testing, and staging environments
without duplicating data storage costs.
 Generous Free Tier
 Neon provides a substantial free tier with 512 MB of storage and 1
compute unit, making it excellent for development projects, prototypes,
and small applications without upfront costs.
 Standard PostgreSQL Compatibility
 Since Neon runs genuine PostgreSQL, you can use all your existing tools,
extensions, and SQL knowledge without any vendor lock-in or proprietary
syntax to learn.

Why Neon
instead of
AWS
 Serverless vs. Always-On Instances
 Neon automatically scales compute to zero when inactive
and scales up on demand, while AWS RDS requires you to
provision and pay for fixed database instances that run
continuously, even during periods of no activity.
 Simplified Management and Setup
 Neon handles all database administration tasks through a
streamlined interface, whereas AWS RDS requires
configuring VPCs, security groups, parameter groups, and
other infrastructure components that add complexity to
deployment and maintenance.
 Developer-Focused Features
 Neon provides Git-like database branching for development
workflows and instant database creation, while AWS RDS
focuses on enterprise features like Multi-AZ deployments
and read replicas that may be overkill for many
applications.

Deploying
the database
to the cloud

Deploying the
application to Vercel

Deploying
the
application
 Next.js applications can be self hosted and deployed
anywhere
 Provided you have a Node.js runtime
 Just do npm run build && npm start
 Self hosting works well in a Docker container
 Great portability and platform agnostic
 Runs anywhere Docker is supported
 Avoids vendor lock-in
 Many providers make this even easier and better using
adapters
 AWS Amplify
 Cloudflare
 Deno Deploy
 Netlify
 Vercel

Deploying
the
application

Deploying
the
application
to Vercel
 Vercel is the company behind Next.js
 A significant part of the React core team work there
 They use usage-based pricing
 With a with free tier
 A lot of build in tooling and services
 CDN for scaling
 Continuous deployment based on updates to GitHub’s main
branch
 Automatic preview deployments with GitHub PR’s

Deploying
the
application
to Vercel

Deploying
the
application

Persisting selected
movies

Persisting
selected
movies
 Automatic State Synchronization
 Valtio's subscribe() function reacts to any state change in your proxy object,
automatically triggering localStorage saves whenever selected movies are added or
removed without requiring manual persistence calls throughout your application
code.
 Simple JSON Serialization Pattern
 You can initialize your state from localStorage with
JSON.parse(localStorage.getItem('selectedMovies')) and then use subscribe() to
automatically save the entire state object with JSON.stringify(state) whenever it
changes, creating a seamless two-way sync.
 Minimal Setup Code
 The entire persistence setup takes just a few lines of code - create your proxy state
with initial localStorage data, then add one subscribe() call that handles all future
saves automatically, eliminating complex persistence logic scattered throughout your
components.
 Real-time Persistence
 Since subscribe() triggers on every state mutation, your selected movies are
immediately saved to localStorage as soon as users select or deselect them, ensuring
no data loss even if the browser crashes or the user accidentally closes the tab.
 Zero Component Coupling
 The persistence logic lives entirely outside your React components, so you can add,
remove, or modify selected movies from any component without worrying about
remembering to save the state - the subscribe() function handles it automatically in
the background.

Persisting
selected
movies

Conclusion
 Next.js is a great React application framework
 Creating a new Next.js application is easy
 Using Vercel V0 can speed development a lot
 Docker is great for development purposes
 Not just for deployment to production
 The Prisma ORM makes database access really easy
 React sever component makes using server data much
easier
 React client components make client-side state easier
 Vercel is a great hosting platform
 But not a requirement

Thank you for joining
Share your
thoughts

Full-stack App in half a Day: Next.js 15 Development Bootcamp

More Related Content

Similar to Full-stack App in half a Day: Next.js 15 Development Bootcamp (20)

More from Maurice De Beijer [MVP] (20)

Recently uploaded (20)

Full-stack App in half a Day: Next.js 15 Development Bootcamp

Editor's Notes