NextJS 15 Full Course 2025 | Become a NextJS Pro in 1.5 Hours

Key Concepts

• Next.js: A React framework for building server-rendered web applications.
• App Router: The latest file-based routing system in Next.js.
• File-based Routing: Creating routes based on the directory structure within the app directory.
• Server Components: Components that render on the server, improving SEO and initial load time.
• Client Components: Components that render in the browser, allowing for interactivity and React hooks.
• API Routes: Creating backend endpoints directly within a Next.js application.
• Metadata: Data that provides information about a webpage, used for SEO and social sharing.
• Layouts: Components that wrap around routes, providing a consistent UI structure.
• Turbopack: A bundler used to increase the efficiency and speed of development.

Creating a Next.js Project

• Use the npx create-next-app command in the terminal.
• The command prompts for project name, TypeScript usage, ESLint, Tailwind CSS, source directory, app router, TurboPack, and import alias customization.
• TypeScript and ESLint are highly recommended for production apps.
• The app router is the recommended routing system.
• The project structure includes:
  • tsconfig.json: TypeScript configuration file.
  • postcss.config.js: PostCSS configuration file (for Tailwind CSS).
  • package.json: Contains project dependencies and scripts (dev, build, start, lint).
  • next.config.js: Next.js configuration file for custom webpack configurations, environment variables, and feature settings.
  • .env.local: Stores environment variables (automatically ignored by Git).
  • public: Contains static assets like images, accessible via URL.
  • app: Contains the application's routes and components.

Understanding the app Directory Structure

• favicon.ico: The website's icon.
• globals.css: The main CSS file (for Tailwind CSS or custom styles).
• layout.tsx: Defines the HTML document structure and global UI elements.
  • The children prop renders the content of the current route.
  • Metadata defined here applies to the entire app.
• page.tsx: The component for the main route (/).
• File-based routing: Create new routes by creating folders with the route name and a page.tsx file inside.

Navigation and Routing

• Use the Link component from next/link for client-side navigation.
• <Link href="/about">About</Link> creates a link to the /about route.

Working with Images

• Use the Image component from next/image for optimized image loading.
• Images in the public folder can be accessed directly using /image.jpg.
• For external images, specify the hostname in next.config.js under images.remotePatterns.

Server Components vs. Client Components

• Server Components:
  • Render on the server, improving SEO and initial load time.
  • Cannot use React hooks or browser interactivity.
  • Can directly fetch data from APIs and databases.
  • Declared by default or without the "use client" directive.
• Client Components:
  • Render in the browser, allowing for interactivity and React hooks.
  • Require the "use client" directive at the top of the file.
• To use client-side functionality within a server component, create a separate client component and import it.

Dynamic Routes

• Create dynamic routes using bracketed folder names (e.g., [userId]).
• Access the route parameters using the params prop in the page.tsx file.
• Example: app/users/[userId]/page.tsx

• interface Props {
    params: { userId: string };
  }
  
  export default async function UserPage({ params }: Props) {
    const userId = params.userId;
    // ...
  }
  

• Use the notFound() function from next/navigation to handle invalid route parameters and display a 404 page.

Loading and Error States

• Create a loading.tsx file within a route folder to display a loading state while the route is loading.
• Create an error.tsx file within a route folder to display an error message when an error occurs.

Project Structure Recommendations

• Keep route-related files within the app directory.
• Create separate folders outside of app for components, state management (e.g., store), and utility functions (e.g., lib).

Layouts

• Create a layout.tsx file within a route folder to define a layout for that route and its children.
• Layouts provide a consistent UI structure around specific sections of the application.

API Routes

• Create API endpoints within the app/api directory.
• Create a folder for each endpoint (e.g., app/api/hello).
• Create a route.ts file inside the endpoint folder.
• Export async functions for each HTTP method (e.g., GET, POST).

• import { NextResponse } from 'next/server';
  
  export async function GET() {
    return NextResponse.json({ message: 'Hello from API' });
  }
  
  export async function POST(request: Request) {
    const data = await request.json();
    const { name } = data;
    return NextResponse.json({ message: `Hello ${name}, this was sent from the API` });
  }
  

• In server components, use the full URL (including localhost:3000 or the deployed domain) when making API requests to your own API.
• In client components, use the relative path (/api/hello) when making API requests.

Metadata and SEO

• Define metadata for each page using the metadata property in the page.tsx file.

• import type { Metadata } from 'next';
  
  export const metadata: Metadata = {
    title: 'About Us | Website Name',
    description: 'About our company and mission',
    keywords: ['about', 'company', 'mission', 'AI', 'SaaS'],
  };
  

• Set global metadata in the layout.tsx file.
• Metadata includes title, description, keywords, social media tags (e.g., Twitter card).

Conclusion

This course provides a comprehensive introduction to Next.js 15, covering project setup, routing, server and client components, API routes, layouts, and metadata. By understanding these core concepts, developers can build performant, SEO-friendly web applications with Next.js. The distinction between server and client components is crucial for optimizing performance and SEO, while API routes enable the creation of backend logic directly within the Next.js application.