Next:
Impressum
nextjs
1
Impressum
2
React Training: Next.js Curriculum
2.1
Overview and Architecture
2.2
Next.js Hands-on
2.3
Next.js Deployment and Optimization
3
Features of Next.js
3.1
Server-Side Rendering (SSR)
3.2
Static Site Generation (SSG)
3.3
Image Optimization
3.4
API Routes
3.5
TypeScript Integration
3.6
Routing
3.7
CSS Support
3.8
Environment Variables
3.9
Fast Refresh
3.10
Customizable Babel and Webpack Configurations
3.11
Internationalization
4
Architecture of Next.js
4.1
Server-Side Rendering (SSR)
4.2
Static Site Generation (SSG)
4.3
Hybrid Architecture
4.4
API Routes
4.5
File-Based Routing
4.6
Build Optimization
4.7
Plugin and Middleware Support
5
Revision: Strengths and Weaknesses of Next.js
5.1
Strengths
5.1.1
1. Advanced Server-Side Rendering (SSR)
5.1.2
2. Efficient Static Site Generation (SSG)
5.1.3
3. Intuitive Routing
5.1.4
4. Native TypeScript Support
5.1.5
5. Image Optimization
5.1.6
6. Customizable Architecture
5.2
Weaknesses
5.2.1
1. Steep Learning Curve
5.2.2
2. Overhead for Smaller Projects
5.2.3
3. Limited Flexibility in Server Logic
5.2.4
4. Dependency on the Community
5.2.5
5. Specific Hosting Requirements
6
TypeScript vs JavaScript
6.1
Introduction
6.1.1
JavaScript
6.1.2
TypeScript
6.2
Main Differences
6.2.1
Static vs. Dynamic Typing
6.2.2
Error Detection
6.2.3
Tooling and Development Experience
6.2.4
Learning Curve
6.3
Use Cases
6.3.1
JavaScript
6.3.2
TypeScript
7
Installation and Configuration of Next.js (With yarn / npm)
7.1
Prerequisites
7.2
Installation with npm
7.2.1
Step 1: Create Project Directory
7.2.2
Step 2: Install Next.js
7.2.3
Step 3: Create Project Structure
7.2.4
Step 4: Add Scripts
7.2.5
Step 5: Start Development Mode
7.3
Installation with yarn
7.3.1
Step 1: Create Project Directory
7.3.2
Step 2: Install Next.js
7.3.3
Step 3: Create Project Structure
7.3.4
Step 4: Add Scripts
7.3.5
Step 5: Start Development Mode
7.4
npm or yarn
7.5
Content
7.6
Typescript
7.6.1
Steps to Use TypeScript in Next.js
8
Creating a Next.js Project with create-next-app
8.1
Prerequisites
8.2
Step-by-Step Guide
8.2.1
Step 1: Run create-next-app
8.2.2
Step 2: Navigate to the Project Directory
8.2.3
Step 3: Start the Development Server
8.2.4
Step 4: Explore the Project Structure
8.2.5
Step 5: Develop and Customize
8.3
Exercise: Using “src” Directory in Create-Next-App
8.3.1
Objective:
8.3.2
Task:
8.3.3
Requirements:
9
Development vs. Production Mode in Next.js
9.1
Development Mode
9.1.1
Starting in Development Mode
9.2
Production Mode
9.2.1
Starting in Production Mode
9.3
Exercise: Switching Between Development and Production Modes in Next.js
9.3.1
Objective:
9.3.2
Task:
9.3.3
Requirements:
10
Routing with Next.js
10.1
Basic Routing
10.1.1
File-Based Routing
10.1.2
Dynamic Routing
10.1.3
Link Component
10.2
Advanced Routing
10.2.1
API Routes
10.2.2
Catch-all Routes
10.2.3
Redirects and Rewrites
10.2.4
Exercise: Introduction to Routing with Next.js
10.2.5
App Router: A new era of routing
11
API Routes in Next.js
11.1
Basics of API Routes
11.1.1
Creating API Routes
11.1.2
Handling Requests
11.1.3
HTTP Methods
11.2
Benefits of API Routes
11.3
Use Cases
12
Exercise Task: API Routes in Next.js
12.1
Exercise: Building a Frontend and Backend for a User Profile Display using Next.js API Routing
12.1.1
Objective:
12.1.2
Task:
12.1.3
Requirements:
13
Load assets with Next.js
13.1
Introduction
13.2
Static assets
13.3
Import of component assets
13.4
Optimization of images
13.5
Dynamic loading of assets
13.6
Environment variables for assets
14
Exercise: Loading assets in a Next.js application
14.1
Task
14.1.1
Requirements
14.1.2
Sample solution
14.2
Loading Markdown files in Next.js
14.2.1
1. installing necessary packages
14.2.2
2. prepare markdown files
14.2.3
3. import Markdown files
14.2.4
4. parsing Markdown content
14.2.5
5. rendering the content
14.3
Exercise: Integrating Markdown files into Next.js
14.3.1
Task
14.3.2
Steps to the solution
14.4
Handling forms in Next.js
14.4.1
1. creating a form
14.4.2
2. management of the form status
14.4.3
3. form submit handling
14.4.4
4. server-side processing of form data
14.4.5
5. validation of form data
15
Exercise: Simple contact form in Next.js
15.1
Task
15.1.1
Requirements:
15.2
Images and image optimization in Next.js
15.2.1
1. using the Next.js image components
15.2.2
2. image sizes and responsive images
15.2.3
3. image formats and modern image loading
15.2.4
4. placeholders and image loading
15.2.5
5. server-side image optimization
16
Exercise: Image gallery in Next.js
16.1
Task
17
SEO with Next.js
17.1
Server-side rendering (SSR)
17.2
Static page generation (SSG)
17.3
Dynamic routes
17.4
Meta tags and head management
17.4.1
Example:
17.5
Canonical tags
17.6
Accessibility and Semantic HTML
17.7
Exercise: SEO-optimized blog application with Next.js
17.7.1
Task
17.7.2
Structure of the application
17.8
Creating sitemaps in Next.js
17.8.1
1. basic concept of a sitemap
17.8.2
2. manual creation of a sitemap
17.8.3
3. automated sitemap generation
17.8.4
4. send sitemap to search engines
17.9
Exercise: Creating an automated sitemap in Next.js
17.9.1
Task
17.9.2
Requirements
17.10
Canonical and other meta tags in Next.js
17.10.1
Canonical tags
17.10.2
Other important meta tags
17.10.3
Implementation in Next.js
17.11
Exercise: Implementation of SEO optimizations in a Next.js app
17.11.1
Objective
17.11.2
Requirements
17.12
Core Web Vitals in Next.js
17.12.1
The three main metrics of Core Web Vitals
17.12.2
Optimization in Next.js
17.12.3
Measurement of the Core Web Vitals
17.13
Exercise: Optimization of the Core Web Vitals in a Next.js application
17.13.1
Task
18
Translation in Next.js
18.1
International routes (i18n routing)
18.1.1
Configuration
18.2
Localization libraries
18.2.1
Example with react-i18next:
18.3
Dynamic loading of translations
18.4
Localization of date and time formats
18.5
SEO for multilingual pages
18.6
Exercise: Multilingual Next.js application
18.6.1
Aim of the task
18.6.2
Task creation
19
Error handling in Next.js
19.1
Default error page
19.1.1
Example of a custom error page:
19.2
Server-side error handling
19.2.1
Example:
19.3
Client-side error handling
19.3.1
Error Boundaries in React
19.4
API routes error handling
19.4.1
Example:
19.5
Exercise: Creating a Next.js app with custom error handling
19.5.1
Task
19.5.2
Step-by-step guide
20
Compiling in Next.js
20.1
Webpack in Next.js
20.1.1
Customizing the webpack configuration
20.2
Babel in Next.js
20.2.1
Customizing the Babel configuration
20.3
Optimizations during compilation
21
Exercise: Creating a simple Next.js app with custom webpack configuration
21.1
Aim of the task
21.2
Steps to perform the task
22
Minifying in Next.js
22.1
Automatic minimization
22.2
Custom configuration of the minimization
22.2.1
Example configuration:
22.3
Advantages of minimization
22.4
Exercise: Creating a Next.js application with minimization
22.4.1
Goal
22.4.2
Task
23
Bundling in Next.js
23.1
Basic concept of bundling
23.2
Webpack in Next.js
23.2.1
Features of Webpack in Next.js
23.3
Webpack configuration customization
23.3.1
Example:
23.4
Best practices for effective bundling
23.5
Exercise: Creating a simple Next.js app with bundling customizations
23.5.1
Objective
23.5.2
Requirements
23.5.3
Steps
24
Code splitting in Next.js
24.1
Automatic code splitting
24.1.1
Example
24.2
Dynamic import with
next/dynamic
24.2.1
Example for dynamic import:
24.3
Advantages of code splitting
24.4
SSR and code splitting
24.5
Exercise: Dynamic loading of components in Next.js
24.5.1
Objective
24.5.2
Requirements
24.5.3
Steps
25
Rendering modes in Next.js
25.1
Server-side rendering (SSR)
25.1.1
Features of SSR:
25.1.2
Use in Next.js:
25.2
Static page generation (SSG)
25.2.1
Features of SSG:
25.2.2
Use in Next.js:
25.3
Client-side rendering (CSR)
25.3.1
Features of CSR:
25.3.2
Use in Next.js:
25.4
Hybrid mode
25.4.1
Exercise: Creating a Next.js application with different rendering modes
26
Pre-rendering in Next.js
26.1
Types of pre-rendering in Next.js
26.1.1
Static Site Generation (SSG)
26.1.2
Server-side rendering (SSR)
26.2
Advantages of pre-rendering
26.3
Hybrid approach
26.4
Client-side rendering as a supplement
26.5
Exercise: Simple blog application with Next.js
26.5.1
Task
26.5.2
Requirements
27
Server-side rendering (SSR) in Next.js
27.1
How SSR works in Next.js
27.1.1
Advantages of SSR
27.1.2
Implementation of SSR in Next.js
27.2
Dynamic data handling
27.3
Differences to static rendering
27.4
Attention to server load
27.5
Exercise: Creating a simple Next.js app with server-side rendering (SSR)
27.5.1
Task
28
Static Site Generation (SSG) in Next.js
28.1
How SSG works in Next.js
28.1.1
Advantages of SSG
28.1.2
Implementation of SSG in Next.js
28.2
Dynamic routes in SSG
28.2.1
Example for dynamic routes:
28.3
Differences to SSR
28.4
Incremental Static Regeneration (ISR)
28.5
Exercise: Creating a blog application with static page generation (SSG) in Next.js
28.5.1
Task
28.5.2
Data structure
29
Deployment and hosting of Next.js applications
29.1
Hosting options
29.1.1
Vercel
29.1.2
Netlify
29.1.3
Heroku
29.1.4
AWS, Google Cloud, Azure
29.1.5
Traditional web servers
29.2
Deployment process
29.2.1
Build process
29.2.2
Server configuration
29.2.3
Environment variables
29.2.4
Continuous Integration/Continuous Deployment (CI/CD)