About the course
Our comprehensive Next.js training course equips developers with the skills to create high-performance, scalable web applications, even if you're new to React.
This intensive program introduces the fundamentals of React alongside diving deep into Next.js's powerful features, including server-side rendering (SSR), static site generation (SSG), and automatic code splitting.
For those with existing React knowledge, this course will elevate your skills to the next level. From setting up your development environment to deploying your first application, this instructor-led course provides practical, hands-on experience through real-world examples.
You'll conquer routing, data fetching, and API routes, building robust and SEO-friendly web applications for any use case.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Understand the core concepts and benefits of using the Next.js framework for building web applications.
- Set up a Next.js development environment and grasp the fundamental project structure.
- Develop user interfaces using React components and leverage Next.js's file-based routing system.
- Implement different data fetching strategies, including server-side rendering (SSR) and static site generation (SSG).
- Build dynamic web applications using API routes and Server Actions for backend functionality.
- Apply effective styling techniques using CSS Modules, Tailwind CSS, or CSS-in-JS.
- Manage application state using local React state, Context API, and understand when to use third-party solutions.
- Optimize website performance using Next.js's Image component and other techniques.
-
Web developers interested in building modern, production-ready web applications with React and Next.js.
Developers with some JavaScript experience who want to learn React and its powerful framework, Next.js.
Front-end developers looking to enhance their skillset with server-side rendering and static site generation techniques.
Full-stack developers who want to build performant and scalable web applications using a unified framework.
Anyone eager to learn how to build SEO-friendly and feature-rich web applications with a streamlined development experience.
-
To get the most out of this Next.js course, it would be helpful if you have:
A good grasp of the basics of HTML, CSS, and JavaScript.
While knowing React isn't essential as we'll cover the fundamentals, any prior exposure would be a bonus.
An enthusiasm for learning modern web development techniques and frameworks.
A basic comfort level with using a command line or terminal.
If you have any questions about whether your current skills are a good fit, please don't hesitate to get in touch – we're happy to chat!
-
This Next.js course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to Next.js
What is Next.js and why use it?
Key Features: Server-Side Rendering (SSR), Static Site Generation (SSG), App Router, API Routes, etc.
Setting up the development environment
Project Structure
React Fundamentals (Refresher/Introduction)
Components, JSX, Props, State
Hooks (useState, useEffect, etc.)
This section can be tailored based on the audience's existing React knowledge, as the course is designed to be accessible to those new to React.
Routing and Navigation
File-based routing (pages directory)
Dynamic Routes
Nested Routes
Linking and Navigation
Middleware
Data Fetching
Server Components and Data Fetching
Client Components and Data Fetching
getStaticProps, getServerSideProps (if covering Pages Router)
Fetch API
Caching
Incremental Static Regeneration (ISR)
Rendering
Server-Side Rendering (SSR)
Static Site Generation (SSG)
Client-Side Rendering (CSR)
Client and Server Components
API Routes
Creating API endpoints
Handling requests (GET, POST, etc.)
Server Actions
Introduction to Server Actions
When and when not to use Server Actions
Security considerations
Styling
CSS Modules
Tailwind CSS
CSS-in-JS (Styled Components, Emotion)
State Management
Local vs. Global state
Context API
Third-party state management libraries (Zustand, Redux - if applicable for complex apps)
Image Optimization
Next.js Image component
Optimizing images for performance
Error Handling
error.js
notFound.js
Metadata and SEO
Setting up metadata
SEO best practices
Authentication
Implementing authentication (NextAuth.js)
Handling user sessions
Testing
Unit testing
Integration testing
End-to-end testing
Deployment
Deploying Next.js applications (Vercel, Netlify, etc.)
-
https://nextjs.org/ - the home of Next.js
https://nodejs.org/en - To get started with Next, you need npm (included with Node)
https://www.jetbrains.com/webstorm/ - popular JS and TypeScript editor from JetBrains
https://code.visualstudio.com/ - popular JS and TypeScript editor from Microsoft
Trusted by
