Building Modern Applications with Next.js 14

Target Audience: Existing JavaScript developers with a basic understanding of DOM manipulation and JavaScript concepts.

Course Duration: 2 Days (11 sessions, 1-2 hours each)

Course Objectives:  This course equips you with the skills to build fast, performant, and SEO-friendly web applications using Next.js 14, the latest version of the popular React framework. It provides a comprehensive foundation for building modern web applications with Next.js 14, empowering you to create performant, SEO-friendly, and dynamic user experiences.

By the end of this course, you’ll be able to:

Understand the benefits of Next.js: Grasp the advantages of Next.js for server-side rendering (SSR), static site generation (SSG), and building modern web applications.

Set up and navigate Next.js projects: Confidently initiate Next.js 14 projects using the new app router and explore the project structure.

Master data fetching techniques: Employ various methods for fetching data in Next.js 14 applications, including API routes, the useSWR hook, and server actions.

Style Next.js applications effectively: Apply styling techniques like Global CSS, CSS Modules, and integrate Tailwind CSS for rapid UI development.

Utilize Next.js built-in features: Leverage built-in features like automatic code splitting, image optimization, and routing with dynamic parameters for efficient applications.

Control code execution: Understand and implement Next.js directives like use client and use server to control code execution on the client or server-side.

Work with Server Components (New): Grasp the concept of React Server Components and their potential benefits in Next.js applications (introduced in Session 6).

Handle form submissions and data on the server: Implement forms in Next.js 14, leverage form handling features, and utilize server actions to process form data on the server-side (introduced in Session 7 & 8).

Deploy Next.js applications: Explore deployment options for Next.js applications using platforms like Vercel or Netlify and gain insights into best practices for production deployments.

If time permits we can cover other topics such as:

Leverage External Component Libraries: Explore and understand the benefits of using popular external component libraries like react-query and trpc in your Next.js projects.

Building Full-Stack Applications: Explore handling data on the server-side using Next.js API routes, processing form submissions, and potentially returning responses.

Course Outline:

Why NextJS?

Introduction to Next.js 14:

Server-side Rendering (SSR), Static Site Generation (SSG)
Setting Up a Next.js 14 Project with the new app router

Example Project: Create a Basic Next.js App

Session 2:

Next.js 14 Data Fetching with the app router:
API Routes: Creating serverless functions for data fetching.
useSWR Hook: Performing performant data fetching within components. Introduction to a newer way of working in SSR using server actions “use server”
Example Project: Enhance the basic Next.js app to fetch and display data from an external API.

Session 3:

Styling in Next.js: Global CSS (CSS Modules)
Styling in Next.js with Tailwind CSS:
Introduction to Tailwind CSS: Utility-first approach for rapid UI development. Integrating Tailwind CSS into a Next.js project (configuration, CDN, etc.).
Building styled components with Tailwind classes in React.
Example Project: Style the To-Do List App with Tailwind CSS classes.

Session 4:

Next.js Features: Automatic Code Splitting, Image Optimization, Routing with Dynamic Parameters Introduction to features with practical examples

Session 5 (New):

Next.js Directives: use client and use server – Explore how to control code execution on client or server-side.

Example Project: Implement a “client-only” component

Session 6 (New):

Introduction to React Server Components: Benefits and Use Cases – Understand the concept of server components and their advantages.

Session 7 :

Introduction to Server Actions for Form Submission: Handling data on the server-side.

Session 8:

Building Forms with Next.js 14 and Form Handling:
We’ll explore how to create forms in Next.js 14 applications and leverage built-in form handling features like form submission and validation.
We’ll discuss techniques for handling form data on the client-side (validation) and server-side (submission
processing).

Example Project: Implement form submission for adding comments in tasks

Session 9:

Deployment and Next Steps:
We’ll explore different deployment options for Next.js applications, including platforms like Vercel or Netlify.
We’ll discuss best practices for deploying and managing Next.js applications in production.

Session 10 (Bonus):

Using External Component Libraries: Material UI, Ant Design, etc.
We’ll explore popular external component libraries such as react-query and trpc.
We’ll discuss the benefits and considerations of using these libraries.

Session 11 (Bonus):

Going full stack with NextJS: Handling data server side:
We’ll leverage Next.js API routes to handle form submission on the server-side. This will involve creating an API route that receives the form data, processes it (e.g., stores comments in a database), and potentially returns a response to the client.