Next.js
NE01 - Next.js Routing
Complexity
Junior
Timeframe
5h
Summary
You should understand routing and navigation in Next.js.
Skill Breakdown
You should understand how to set up a Next.js project.
You should understand how to define routes with page.ts files.
You should understand pages and layouts.
You should understand how to add navigation to add web app:
- using the
<Link>component - using
useRouter
You should understand how to perform redirects.
You should understand important routing concepts:
- route groups
- dynamic routes
- route handlers
You should understand how to write middleware.
Required Resources
Next.js Docs (check that you have "Using App Router" enabled):
Optional Resources
The are no optional resources for this skill.
NE02 - Next.js Rendering
Complexity
Junior
Timeframe
3h
Summary
You should understand different rendering strategies on the client and on the server.
Skill Breakdown
You should understand what server components are:
- how are server components rendered
- different server rendering strategies:
- static rendering
- dynamic rendering
- streaming
- dynamic functions (like
cookiesandheaders)
You should understand what client components are.
You should understand when to use server components and when to use client components.
You should understand the various runtimes and the differences between them:
- Node.js runtime
- edge runtime
Required Resources
Next.js Docs:
Optional Resources
The are no optional resources for this skill.
NE03 - Next.js Vercel Deployment
Complexity
Junior
Timeframe
1h
Summary
You should understand how to deploy a Next.js app to production using Vercel.
Skill Breakdown
You should know how to deploy a Next.js using Vercel.
You should understand important production concerns when deploying a Next.js app.
Required Resources
Next.js Docs:
Vercel Docs:
Optional Resources
The are no optional resources for this skill.
NE04 - Next.js Data Fetching
Complexity
Middle
Timeframe
2h
Summary
You should understand how data fetching works in Next.js.
Skill Breakdown
You should understand how Next.js extends the native fetch API on the server:
- caching data
- revalidating data
You should understand how server actions work.
You should understand best practices for fetching data.
Required Resources
Next.js Docs:
Optional Resources
The are no optional resources for this skill.
NE05 - Next.js Optimization
Complexity
Middle
Timeframe
2h
Summary
You should the various optimizations you can use in Next.js to improve user experience.
Skill Breakdown
You should understand the optimizations Next.js does with:
- images
- fonts
- scripts
- metadata
- static assets
You should understand the bundle analyzer.
You should understand lazy loading.
Required Resources
Next.js Docs:
Optional Resources
The are no optional resources for this skill.
NE06 - Next.js Caching
Complexity
Middle
Timeframe
3h
Summary
You should understand how caching in Next.js works. The main reason for that is, because Next.js caches extremely agrresively, therefore leading to weird behaviour that cannot be debugged without this knowledge.
Skill Breakdown
You should understand the following caches:
- Data Cache
- Request Memoization
- Full Route Cache
- Router Cache
Required Resources
Next.js Docs:
Optional Resources
The are no optional resources for this skill.