Next.js 15 Crash Course

Introduction to Next.js 15

• Presenter: Vishwas
• Framework: Next.js 15
• Purpose: To build production-ready full-stack web applications using React.
• Features:
  • Routing
  • Optimized rendering
  • Data fetching
  • Bundling and compiling
  • Built-in conventions from experienced team

Prerequisites

• HTML, CSS, and modern JavaScript
• Familiarity with React: components, props, state, hooks

Setting Up Development Environment

• Node.js: Version 18.18 or later required
• Code Editor: Visual Studio Code recommended
• Installation Command: npx create-next-app@latest
• Project Setup:
  • Project name: Next.js Demo
  • Use TypeScript, ESLint, and Tailwind CSS
  • Use source directory structure and AppRouter

Project Structure

• Key Files:
  • package.json: Dependencies and scripts
  • next.config.ts, tsconfig.json, eslint rc.json
  • Tailwind CSS and PostCSS configuration files
• Folders:
  • .next: Generated during dev/build
  • node_modules: Installed dependencies
  • public: Static assets
  • source: Main application code

React Server Components

• Types:
  • Server Components: Rendered on server, no interactivity
  • Client Components: Rendered in browser, can use state/hooks
• Use Case:
  • Use server components for performance, client components for interactivity

File-Based Routing

• Structure:
  • Routes inside app folder
  • Named page.js or page.tsx
• Dynamic Routes: Using square brackets (e.g., [id])
• Route Groups: Logical groups without affecting URL

Layouts

• Purpose: Shared UI across pages (e.g., headers, footers)
• Efficiency: Layouts don't re-render on navigation

Navigation

• Components:
  • link for navigation between pages
  • useRouter for programmatic navigation
• Active Links: Styled using usePathName hook

Route Handlers

• Purpose: Custom request handlers, RESTful endpoints
• Usage: Handle submissions, database queries

Data Fetching

• Client Components: Traditional fetch within useEffect
• Server Components: Use async/await directly in component
• Advantages: Server components reduce bundle size, improve SEO

Server Actions

• Purpose: Execute server-side logic within components
• Example: Form submission with secure data handling

Authentication with Clerk

• Features:
  • User sign-up, sign-in, account management
  • Conditional rendering based on auth status
  • Route protection using middleware
• Hooks and Components:
  • signInButton, userButton
  • signedIn, signedOut components for UI

Conclusion

• Summary: Next.js 15 offers comprehensive features for building modern web applications.
• Further Learning: Upcoming detailed series on advanced Next.js topics.

This crash course provided a broad overview of Next.js 15, covering setup, core features, and advanced functionality, especially with the integration of Clerk for authentication.