Front-end web development
Next.js: full stack React applications and SEO
Build fast sites and applications with server-side rendering, SEO and internationalization.
- Duration
- 14 h · 2 days
- Level
- Intermediate
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program shows how to develop with Next.js: file-based routing, server and client components, data fetching, static or dynamic rendering, search optimization and internationalization. Participants build a complete site and learn to choose the right rendering strategy for each page.
Who this program is for
- React developers wishing to gain performance and search visibility
- Full stack JavaScript developers
- Teams launching a showcase site or an application with public content
Prerequisites
- Good knowledge of React and JavaScript
- Notions of TypeScript appreciated
Learning objectives
- Create a Next.js project and understand its routing
- Choose between static, dynamic and regenerated rendering
- Distinguish server components from client components
- Fetch data and create API routes
- Optimize SEO and performance
- Internationalize an application
- Test the application
Detailed curriculum
4 modules · 14 h · 2 days
Day 1
Next.js fundamentals
30% theory · 70% practice
- Creating a project and reading its structure
- Folder-based routing, layouts and pages
- Server components and client components
- Navigation and links
- Special files: loading, error, not found
🛠 Hands-on workshops
First application1.5 h
Build a multi-page site with a shared layout.
✅ Deliverable : A navigable Next.js site
Data and rendering
30% theory · 70% practice
- Fetching data on the server
- Static rendering, dynamic rendering and incremental regeneration
- Cache and revalidation
- API routes and server actions
- Code splitting and on-demand loading
🛠 Hands-on workshops
Blog with remote data1.5 h
Display articles from an API with the right rendering strategy.
✅ Deliverable : A server-rendered blog
Day 2
Style, SEO and performance
30% theory · 70% practice
- CSS Modules and component libraries
- Dynamic metadata and social tags
- Sitemap, robots file and structured data
- Images, fonts and Core Web Vitals
- Measuring with Lighthouse
🛠 Hands-on workshops
SEO audit1.5 h
Audit a site and fix metadata and performance.
✅ Deliverable : An audit report and the fixes
Internationalization, tests and deployment
30% theory · 70% practice
- Localized routes and translation files
- Component tests with Jest or Vitest
- End-to-end tests
- Environment variables and deployment
- Production best practices
🛠 Hands-on workshops
Tested bilingual site2 h
Add a second language and tests to the project's site.
✅ Deliverable : A deployed bilingual site
Tools and technologies
Next.jsNode.jsReactTypeScriptVisual Studio Code
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and Node.js installed
Resources provided
- Course materials and repository of corrected exercises
- Cheat sheet of rendering strategies
Career outcomes
- A complete, deployable Next.js site
- A rendering strategy decision grid
- SEO optimization reflexes
Related video courses
My video courses that go with this program, to get ready for the training or to review afterwards. Free with an account.
