Next.js 16 : The Complete Guide to Modern Web Development

Set up the development environment for Next.js 16 by installing Visual Studio Code and Node.js. Open Command Prompt and type node -version to verify the installation.

Create a Next.js 16 project using the app router, scaffold with npx create-next-app, enable tailwind and eslint in a src/app setup, and run the dev server on localhost:3000.

Create routes by adding folders inside the app directory; each folder defines a route, and page.js supplies the content, with layout controlling structure under the app router.

Explore Next.js routing by creating a blog page under app/blog/page.js, demonstrating that a folder with a page.js becomes a route at /blog, with an optional layout and an h1 rendering.

Explore nested routing in Next.js by creating a /users/employees route with page.js, learn how only page.js defines a route, and organize reusable components for complex apps.

Explore dynamic routing in Next.js by creating square-bracket folders and a page.js, capturing the URL as params to fetch and render data for each ID.

Learn to access dynamic route parameters in Next.js 16 by resolving params with await, destructuring the slug, and displaying URL-derived ids like 1, 2, or 255.

Learn how to read and use search params in Next.js by extracting key-value pairs after the URL's question mark, logging them, and storing them for component use with await searchParams.

Learn to use search params in Next.js by capturing query values after the question mark with SearchParams, logging them, and accessing them by key in your component.

Explore how layouts wrap the Next.js 16 app, with a global layout and per-route layouts that render page content via children, creating a layered structure for routes like /blog.

Navigate between pages with the Link component for fast, single-page app transitions; use the useRouter hook for programmatic navigation, and apply server-side redirects via redirect or redirectFromNextNavigation.

Move standard react components into a dedicated components folder in a Next.js project to create reusable, maintainable UI; import Navbar via alias and render it in page.js.

Learn how to add CSS in Next.js with global CSS and module CSS, organizing styles in src/styles and using layout.js to import styles.css for global CSS, or styles.module.css for styling.

Explore parallel routes in Next.js by building a dashboard with courses and news rendered in parallel inside a shared layout. Use props and conditional rendering to switch between routes.

Organize the app with root groups to group related routes without changing the url, and share a layout across routes like brands and models via layout.js.

Build a practical student management app showcasing routing and data handling, with json-server backend, navbar, student list, detail view with edit and delete, add form validation using Formic and Yup.

Set up a Next.js 16 project with Tailwind CSS and Bootstrap, learn rendering, loading states, and not found pages while building a student management app with CRUD and dynamic routes.

Build a reusable header component placed in the layout, with a left title and right navigation links to home and add student pages, styled with bootstrap for responsive layout.

Set up a json server to simulate a backend by creating db.json with a students array, and run the backend on port 3005 with the Next.js frontend on port 3000.

Fetch the students from a json server, render each in a Bootstrap card with name, class, and GPA, then enable responsive grid layout and dynamic navigation to /students/id.

In Next.js 16, build a new form route at app/form/add/page.js to add a student, capture name, studentClass, and GPA with FormData, and POST to localhost:3005 to save in db.json.

Centralize backend logic in helpers/actions.js with use server, implement addStudent via formData, post to localhost:3005, import into page.js, and redirect to homepage for a cleaner, reusable workflow.

Convert the component to a client component and import useActionState for the AddStudent server action. Manage state, action, isPending; validate name field, use try-catch, and display success or error messages.

Create a loading.js in the app folder to display a loading screen automatically with Next.js while data fetches, with global or route-specific loading to tailor the user experience.

Fetch and render student details using dynamic routing in Next.js 16. Read the id from params, request /students/{id}, convert to JSON, and display name, class, and gpa.

Build a client-side error UI in Next.js with error.js, useClient, and useEffect to log errors, provide a reset for retry, and display a 'something went wrong' screen in a route.

Create a custom not found UI in Next.js 16 by adding app/not-found.js to display a not found message and a link to return home for truly missing routes.

Use Next.js 16 to navigate to a dynamic edit route via the student slug, fetch the student by ID, and render a prefilled EditForm for update.

Implement live form validation in Next.js 16 using Formic and Yup, prefill with student data, enable re-initialization, and display Bootstrap alerts for errors after field touch.

Submit an edit form that calls the backend editStudent with async handling. Use useTransition to manage pending state, disable the button, show saving, and handle errors.

Implement a delete feature on the student detail page by binding a server action to the student id, sending a delete request to the backend, and redirecting to the homepage.

Explore how Next.js builds static pages at build time, caches them, and uses revalidation to keep production pages fresh with dynamic data.

Explore the shift from static to dynamic rendering in Next.js 16, comparing real-time data fetching with and without caching, and learning how revalidation periodically updates cached pages.

Learn to use revalidatePath from Next Cache to instantly refresh the homepage after add, update, or delete operations, and revalidate the homepage and detail page using the student ID.

Learn to fetch data in Next.js with fetch, disable caching to keep data fresh, and convert a page from static to dynamic by controlling caching behavior.

Learn to create API endpoints inside a Next.js project using route handlers and a root.js file, with app/api/data/route.js handling get, post, patch, delete and returning json like hello world.

Fetches all students via a Next.js route.js GET API endpoint, converts the backend response to JSON, returns jsonResponse, and uses a 10-second cache revalidation to balance speed and freshness.

Use a post request to create a student by sending JSON (name, student class, GPA) to the backend, and return the created student with a 201 status after Postman testing.

Implement the update operation with a dynamic route slug, read incoming data, and send a patch request to the backend to update the student, returning the updated record.

Implement delete operations in a Next.js route using a dynamic id, send a delete request, and return a successful 'Deleted successfully' response after verification.

Configure Tailwind CSS and Sass in a Next.js project created with npx create-next-app latest, with Tailwind auto-configured. Run the app on localhost:3000 and start building the UI using Tailwind classes.

Explore Tailwind CSS, a utility-first library with thousands of utilities for typography, spacing, and layout. See how text-2xl and font-medium style text quickly without custom CSS, powered by version 4.

Learn to integrate Sass in a Next.js project by installing Sass, creating a globals.scss with a $mainColor variable, importing it in layout, and applying a class to style pages.

Replace standard image tags with the Next.js image component from the public folder, using a leading slash and defined width and height to enable automatic optimization.

Integrate Hero UI into a Next.js project by installing the library, importing hero-ui-styles, and using ready-made components like buttons for a cleaner, more professional UI.

Build a modern Next.js 16 authentication flow with dummy and real credentials, a Tailwind CSS navbar, NextAuth providers for GitHub login, and a MongoDB-based register/sign-in flow with a session-based UI.

Set up authentication in Next.js with NextAuth using the app router. Configure a credentials provider and an async authorize function with a dummy user, preparing for MongoDB integration later.

Configure NextAuth using the credentials provider by generating and setting next_auth_url and next_auth_secret in a .env.local file, then test sign-in at api/auth/signin/credentials and verify a session token on success.

Learn how middleware in Next.js controls routing and protects pages by checking sessions. Create a middleware file using next/server and apply a matcher to guard routes like /dashboard.

Access and display user session data with getServerSession in NextAuth, configure providers in a shared options file, and redirect unauthenticated users to the login page.

Learn how to implement client-side sessions in NextAuth by creating an auth provider, wrapping the app with a session provider, and using the useSession hook in a client component.

Learn to implement authentication with GitHub in NextAuth for Next.js 16 by creating a GitHub app, configuring client ID and secret, and enabling sign in with GitHub.

Implement a real database sign-in and register flow using MongoDB with Mongoose, powered by Formik and Yup for validation, and redirect authenticated users to the dashboard via getServerSession.

Build a register form in a Next.js 16 app with Tailwind CSS and Formic, featuring sign in / register toggling, labeled inputs for email and password, and clean styling.

implement client-side form validation with formik and yup, showing errors after focus and blur (touched), styling red borders and messages for email and password, and prep for MongoDB authentication.

Connect MongoDB to your Next.js project using mongoose by creating a cluster and a database user. Copy the connection string, enable access from anywhere, and set MONGO_DB_URI for authentication.

Connect to MongoDB using Mongoose, establish a reusable dbConnect function with a connection cache, and define a user model with a unique email and required password, enabling registration and login.

Connect to MongoDB, post email and password to the API route, check for existing email, hash the password with bcrypt, save the user, and return 200 or 500 on errors.

Post a request to /api/register when form_type is true, handle the response and errors, validate duplicate emails, and save the new user with hashed password and timestamps in MongoDB.

Connect to MongoDB with dbConnect and authenticate users via NextAuth using email and hashed password validation with bcrypt. Remove the dummy user, verify sign in success and error handling.

Implement sign-in in the register route using NextAuth's signIn with the credentials provider and form data, then redirect to /dashboard after a successful login and test the flow.

Implement a navbar logout flow using useSession to conditionally render register or logout, connect signOut with a callback url to the homepage, and verify session updates.

Build a real-world full-stack app with authentication, categories, and courses, including a dynamic dashboard, MongoDB integration, form validation, and a Tailwind CSS UI with dynamic routing for course details.

Build the navbar with conditional rendering in header.js to show register when not logged in and dashboard, add course, and add category when a session exists, and test login/logout flow.

Create a category model in a Next.js project using Mongoose, with MongoDB storage, defining a unique name and required description, then save via a form on the dashboard add-category page.

Build the add category route at dashboard/add-category, create an add-category form with useClient, render name and description inputs, and a save button; test and plan UI improvements with Tailwind CSS.

Style this form with Tailwind CSS, using a fixed width, shadow, and white background with a centered layout; apply Tailwind utilities to labels, inputs, and a full-width purple button.

Validate category data on the server with Yup before saving to MongoDB, returning success or error messages and syncing pages with revalidatePath.

Learn to implement form validation with Yup in a Next.js action by creating a dedicated AddCategorySchema, validating form data, returning success or errors, and saving valid data to MongoDB.

Disable the submit button while isPending from useActionState to prevent duplicate requests. Change the button text to adding during loading and show a loading message for clear feedback.

Create the course model in course.js using a Mongoose schema with title, description, price, date, category relation, and an auto-generated slug, laying the groundwork for adding courses via a form.

Build the add course feature in Next.js 16 by creating dashboard route, fetching categories from the database, and passing them to a form with inputs, selects, and a date picker.

Build a production-ready course form with Formic and Yup, managing form state, number-valued price, validation, and submission for title, category, description, and date.

Install and import react-datepicker, manage startDate with useState, sync date with formic via setFieldValue, enable showTimeSelect, and format as April 14, 2026, 4:30 pm.

Create a custom input for the date picker using forwardRef, style with Tailwind, and apply error and touched validation for a consistent, user-friendly form.

Apply a consistent Formik validation pattern across all fields—title, category, description, date, and price—using touched and errors, then test and post data to MongoDB.

Master end-to-end course submission in a Next.js 16 app by sending form data to a server action, using useTransition, storing in MongoDB, and revalidatePath to refresh the homepage.

Learn to enhance user experience in Next.js 16 apps by implementing animated toast notifications with React Toastify, including toast containers, CSS, success and error messages, and isPending to prevent duplicates.

Disable the button while a request is pending to prevent duplicate submissions, and show dynamic text (adding vs save) to indicate progress.

Fetch courses from MongoDB on the homepage with a paginated findCourses using skip and limit, populate full category data, and render them in a masonry grid with a styled header.

Render a responsive 3-column course grid with react masonry css, load placeholder images from lorem picsum, overlay titles and descriptions, and include detail navigation and a load more feature.

learn dynamic data fetching with a load more button that appends courses using state, conditional rendering, and pagination logic for a seamless user experience.

Use a course slug in Next.js 16 to fetch and display course details. Render title, price, description, and category via server actions with not-found handling.

Build a production-level course detail page with tailwind css and next/image, featuring a 1/3 width container, border and rounded corners, a fill image with object-cover, and category information.