diff --git a/docs/markdown/02-routing/01-intro.md b/docs/markdown/02-routing/01-intro.md index 8e2e3f6..33ea5b4 100644 --- a/docs/markdown/02-routing/01-intro.md +++ b/docs/markdown/02-routing/01-intro.md @@ -1,6 +1,6 @@ -# Introduction +# Routing **Key features :** diff --git a/docs/markdown/02-routing/10-naming.md b/docs/markdown/02-routing/10-naming.md index 45f48ab..0e631a4 100644 --- a/docs/markdown/02-routing/10-naming.md +++ b/docs/markdown/02-routing/10-naming.md @@ -1,6 +1,8 @@ - + -# Naming convention +# Routing + +## Conventions (.tsx | .js | .jsx) diff --git a/docs/markdown/02-routing/11-hierarchy.md b/docs/markdown/02-routing/11-hierarchy.md index 7c96499..a63a16d 100644 --- a/docs/markdown/02-routing/11-hierarchy.md +++ b/docs/markdown/02-routing/11-hierarchy.md @@ -1,6 +1,8 @@ - + -# Hierarchy +# Routing + +## File hierarchy File components are rendered and nested in a specific order : diff --git a/docs/markdown/02-routing/12-nesting.md b/docs/markdown/02-routing/12-nesting.md index e65c992..95fa439 100644 --- a/docs/markdown/02-routing/12-nesting.md +++ b/docs/markdown/02-routing/12-nesting.md @@ -1,6 +1,8 @@ - + -# Hierarchy +# Routing + +## Nested file hierarchy Nested routes = nested components diff --git a/docs/markdown/02-routing/13-with-pages-router.md b/docs/markdown/02-routing/13-with-pages-router.md index 8cc4d1c..1314279 100644 --- a/docs/markdown/02-routing/13-with-pages-router.md +++ b/docs/markdown/02-routing/13-with-pages-router.md @@ -7,7 +7,9 @@ } -# Pages router +# Routing + +## With pages router The app router always has priority over the page router diff --git a/docs/markdown/02-routing/20-colocation.md b/docs/markdown/02-routing/20-colocation.md index c03689e..6865425 100644 --- a/docs/markdown/02-routing/20-colocation.md +++ b/docs/markdown/02-routing/20-colocation.md @@ -1,4 +1,4 @@ - + -# Colocation +# Routing + +## Colocation You can collocate files alongside specific files. diff --git a/docs/markdown/02-routing/21-colocation-private.md b/docs/markdown/02-routing/21-colocation-private.md index 0dec498..e2752f9 100644 --- a/docs/markdown/02-routing/21-colocation-private.md +++ b/docs/markdown/02-routing/21-colocation-private.md @@ -1,4 +1,4 @@ - + -# Colocation +# Routing -You can also make an entire subfolder private with an underscore prefix to exclude it from routing : +## Colocation + +You can also make an entire subfolder private with an underscore prefix to exclude it from routing + +##--## + +

diff --git a/docs/markdown/02-routing/30-pages.md b/docs/markdown/02-routing/30-pages.md index 914f5de..7b372db 100644 --- a/docs/markdown/02-routing/30-pages.md +++ b/docs/markdown/02-routing/30-pages.md @@ -1,6 +1,8 @@ -# Page declaration +# Routing + +## Page declaration Create a _page.tsx_ file in nested directories : diff --git a/docs/markdown/02-routing/31-pages-dynamic.md b/docs/markdown/02-routing/31-pages-dynamic.md index 1b85e76..cbfeb35 100644 --- a/docs/markdown/02-routing/31-pages-dynamic.md +++ b/docs/markdown/02-routing/31-pages-dynamic.md @@ -1,6 +1,8 @@ - + -# Dynamic routing +# Routing + +## Page declaration : dynamic routing ``` /app/post/[id]/page.tsx website.com/post/123 diff --git a/docs/markdown/02-routing/40-layout.md b/docs/markdown/02-routing/40-layout.md index 1200836..bfeb04d 100644 --- a/docs/markdown/02-routing/40-layout.md +++ b/docs/markdown/02-routing/40-layout.md @@ -1,4 +1,4 @@ - + -# Layouts +# Routing + +## Shared layouts Layouts can be used to define a UI that is shared between several sub-segments. diff --git a/docs/markdown/02-routing/41-root-layout.md b/docs/markdown/02-routing/41-root-layout.md index d499fc0..3ff0106 100644 --- a/docs/markdown/02-routing/41-root-layout.md +++ b/docs/markdown/02-routing/41-root-layout.md @@ -1,8 +1,8 @@ -# Layouts +# Routing -## Root Layout +## Root layout This layout is **required** diff --git a/docs/markdown/02-routing/42-nested-layout.md b/docs/markdown/02-routing/42-nested-layout.md index b9430e5..788e7dc 100644 --- a/docs/markdown/02-routing/42-nested-layout.md +++ b/docs/markdown/02-routing/42-nested-layout.md @@ -7,7 +7,7 @@ } -# Layouts +# Routing ## Nested layouts diff --git a/docs/markdown/02-routing/43-template.md b/docs/markdown/02-routing/43-template.md index aa54401..20cf8cd 100644 --- a/docs/markdown/02-routing/43-template.md +++ b/docs/markdown/02-routing/43-template.md @@ -1,4 +1,4 @@ - + -# Templates +# Routing + +## Templates Templates are layouts, but when navigating : @@ -42,3 +44,5 @@ const Wrapper = () => { ); }; ``` + + diff --git a/docs/markdown/02-routing/44-groups.md b/docs/markdown/02-routing/44-groups.md index 4ba0821..a7d0f1e 100644 --- a/docs/markdown/02-routing/44-groups.md +++ b/docs/markdown/02-routing/44-groups.md @@ -7,7 +7,9 @@ } -# Groups +# Routing + +## Groups Groups are directories that do not affect URLs @@ -17,9 +19,15 @@ Groups are directories that do not affect URLs


+
+ They can be used for : - Organizing /app directory (by section / feature) - Creating multiple nested layouts for the same segment - Creating multiple root layouts - Applying different layouts without affecting URLs + +
+ + diff --git a/docs/markdown/02-routing/50-advanced.md b/docs/markdown/02-routing/50-advanced.md index ee38b15..4f0a1a9 100644 --- a/docs/markdown/02-routing/50-advanced.md +++ b/docs/markdown/02-routing/50-advanced.md @@ -1,6 +1,8 @@ -# Advanced routing +# Routing + +## Advanced features - Parallel routing - Intercepting routes diff --git a/docs/markdown/02-routing/51-advanced-parallel.md b/docs/markdown/02-routing/51-advanced-parallel.md index 6c454d5..bcff988 100644 --- a/docs/markdown/02-routing/51-advanced-parallel.md +++ b/docs/markdown/02-routing/51-advanced-parallel.md @@ -7,7 +7,7 @@ } -# Advanced routing +# Routing ## Parallel routing diff --git a/docs/markdown/02-routing/52-advanced-intercept.md b/docs/markdown/02-routing/52-advanced-intercept.md index 9d05fd0..366b2e5 100644 --- a/docs/markdown/02-routing/52-advanced-intercept.md +++ b/docs/markdown/02-routing/52-advanced-intercept.md @@ -11,7 +11,7 @@ } -# Advanced routing +# Routing ## Intercepting routes diff --git a/docs/markdown/02-routing/53-advanced-intercept-patterns.md b/docs/markdown/02-routing/53-advanced-intercept-patterns.md index 0ce1765..b46c281 100644 --- a/docs/markdown/02-routing/53-advanced-intercept-patterns.md +++ b/docs/markdown/02-routing/53-advanced-intercept-patterns.md @@ -7,7 +7,7 @@ } -# Advanced routing +# Routing ## Intercepting routes diff --git a/docs/markdown/02-routing/54-advanced-intercept-modal.md b/docs/markdown/02-routing/54-advanced-intercept-modal.md index 62f7a23..4535a0e 100644 --- a/docs/markdown/02-routing/54-advanced-intercept-modal.md +++ b/docs/markdown/02-routing/54-advanced-intercept-modal.md @@ -12,7 +12,7 @@ } -# Advanced routing +# Routing ## Intercepting routes + Parallel routing diff --git a/docs/markdown/02-routing/60-lab.md b/docs/markdown/02-routing/60-lab.md index fa9a06e..9b22072 100644 --- a/docs/markdown/02-routing/60-lab.md +++ b/docs/markdown/02-routing/60-lab.md @@ -1,6 +1,6 @@ -# Pages +

Routing

## Lab @@ -9,14 +9,22 @@ **1. Create the application pages** - Homepage -- Employees list page -- Employees single page -- Expenses page - Login page +- Employees pages (List, Detail, Edit, Create) +- Expenses page (List, Single) -**2. Create the application layouts** +**2. Add some metadatas (title, description)** -- Dashboard layout -- Authentication layout +**3. Create the application layouts** + +- Authentication layout for the login page +- Dashboard layout for all the rest + +
+
+ +_Styling isn't important. You can help yourself to these components :_
+_DashboardLayout, AuthLayout, PageTitle, PersonCard, ExpensesTable, ExpenseDetails_

+_You can also use mocked data from **/src/data**_ diff --git a/docs/markdown/02-routing/80-lab.md b/docs/markdown/02-routing/80-lab.md index d75236f..dc84acc 100644 --- a/docs/markdown/02-routing/80-lab.md +++ b/docs/markdown/02-routing/80-lab.md @@ -1,19 +1,24 @@ -# Navigating +

Navigating

## Lab -**1. Navigating between pages** +**1. next/link component** -- Implement the card Links -- Implement the navigation menu -- Show the active menu links +- Update the navigation menu to use client-side navigation +- On the employees list view, add two links per card to go on the details page, or on the edit page -**2. Use router methods** +**2. Programmatic navigation** -- Implement a "Search" component +- Modify the ExpensesTable component to navigate to the expense detail on click + +**3. Navigation state** + +- Implement a "Search" component (you can use the TextField component, or the \ element directly) +- Update the URL when typing to add a query parameter containing the user search +- Update the employees list view to filter depending on the URL query parameter diff --git a/docs/markdown/03-server-components/01-intro.md b/docs/markdown/03-server-components/01-intro.md index 049321e..0a6c82b 100644 --- a/docs/markdown/03-server-components/01-intro.md +++ b/docs/markdown/03-server-components/01-intro.md @@ -1,6 +1,6 @@ -# React Server Component : Why ? +# Server Components : Why ? - Reduce JavaScript bundle size - Better initial performances diff --git a/docs/markdown/03-server-components/10-csr.md b/docs/markdown/03-server-components/10-csr.md index 74d685d..55a6069 100644 --- a/docs/markdown/03-server-components/10-csr.md +++ b/docs/markdown/03-server-components/10-csr.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Client-Side applications +## Client-side applications index.html diff --git a/docs/markdown/03-server-components/11-csr-workflow.md b/docs/markdown/03-server-components/11-csr-workflow.md index a8960ac..96a956e 100644 --- a/docs/markdown/03-server-components/11-csr-workflow.md +++ b/docs/markdown/03-server-components/11-csr-workflow.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Client-Side applications +## Client-side applications
diff --git a/docs/markdown/03-server-components/13-ssr.md b/docs/markdown/03-server-components/13-ssr.md index 7ea143f..469cec6 100644 --- a/docs/markdown/03-server-components/13-ssr.md +++ b/docs/markdown/03-server-components/13-ssr.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Server-Side Rendering +## Server-side Rendering index.html diff --git a/docs/markdown/03-server-components/14-ssr2.md b/docs/markdown/03-server-components/14-ssr2.md index 68911ca..174305f 100644 --- a/docs/markdown/03-server-components/14-ssr2.md +++ b/docs/markdown/03-server-components/14-ssr2.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Server-Side Rendering +## Server-side Rendering index.html diff --git a/docs/markdown/03-server-components/15-ssr3.md b/docs/markdown/03-server-components/15-ssr3.md index 22ce383..846ee43 100644 --- a/docs/markdown/03-server-components/15-ssr3.md +++ b/docs/markdown/03-server-components/15-ssr3.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Server-Side Rendering +## Server-side Rendering index.html diff --git a/docs/markdown/03-server-components/16-ssr-next.md b/docs/markdown/03-server-components/16-ssr-next.md index c8d9c45..bb58520 100644 --- a/docs/markdown/03-server-components/16-ssr-next.md +++ b/docs/markdown/03-server-components/16-ssr-next.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Server-Side Rendering +## Server-side Rendering Next.js : Page router diff --git a/docs/markdown/03-server-components/17-ssr-workflow.md b/docs/markdown/03-server-components/17-ssr-workflow.md index 47a4e2c..bdf721a 100644 --- a/docs/markdown/03-server-components/17-ssr-workflow.md +++ b/docs/markdown/03-server-components/17-ssr-workflow.md @@ -1,8 +1,8 @@ -# Rendering methods +# Server Components : Why ? -## Server-Side Rendering +## Server-side Rendering
diff --git a/docs/markdown/03-server-components/18-hydration-cons.md b/docs/markdown/03-server-components/18-hydration-cons.md index d5c7b4b..8ed4afa 100644 --- a/docs/markdown/03-server-components/18-hydration-cons.md +++ b/docs/markdown/03-server-components/18-hydration-cons.md @@ -1,6 +1,6 @@ -# Rendering methods +# Server Components : Why ? ## Hydration problems diff --git a/docs/markdown/03-server-components/31-rules-hooks.md b/docs/markdown/03-server-components/31-rules-hooks.md index 558909a..02bd428 100644 --- a/docs/markdown/03-server-components/31-rules-hooks.md +++ b/docs/markdown/03-server-components/31-rules-hooks.md @@ -2,7 +2,7 @@ # Constraints -As soon as a component needs to use **hooks** or **contexts**, it must become a client-component +As soon as a component needs to use **hooks**, **contexts** or **event handlers**, it must become a client-component Why ? Because this means it will be re-rendered **A server-component can never be re-rendered** @@ -11,7 +11,7 @@ Why ? Because this means it will be re-rendered

-```jsx [1] +```jsx [1, 6] "use client" import { useState, useEffect } from 'react'; diff --git a/docs/markdown/04-data-fetching/01-intro.md b/docs/markdown/04-data-fetching/01-intro.md index eeda2ba..f1377b4 100644 --- a/docs/markdown/04-data-fetching/01-intro.md +++ b/docs/markdown/04-data-fetching/01-intro.md @@ -6,8 +6,8 @@ Two ways to fetch data : -- On the server : React Server Components -- On the client : Route handlers +1. On the server : React Server Components +2. On the client : Route handlers
diff --git a/docs/markdown/04-data-fetching/10-server-fetch.md b/docs/markdown/04-data-fetching/10-server-fetch.md index 6921a5b..fd59e93 100644 --- a/docs/markdown/04-data-fetching/10-server-fetch.md +++ b/docs/markdown/04-data-fetching/10-server-fetch.md @@ -1,8 +1,8 @@ -# Fetching from the server +# 1. Fetching from the server -## fetch +## using fetch Data can be fetched into an asynchronous server component : diff --git a/docs/markdown/04-data-fetching/11-server-third.md b/docs/markdown/04-data-fetching/11-server-third.md index 5d1c078..5a22dea 100644 --- a/docs/markdown/04-data-fetching/11-server-third.md +++ b/docs/markdown/04-data-fetching/11-server-third.md @@ -1,8 +1,8 @@ -# Fetching from the server +# 1. Fetching from the server -## third party libraries +## using third party libraries Allows to use third parties libraries : diff --git a/docs/markdown/04-data-fetching/12-server-parallel-pattern.md b/docs/markdown/04-data-fetching/12-server-parallel-pattern.md index c5a7a34..aa487dc 100644 --- a/docs/markdown/04-data-fetching/12-server-parallel-pattern.md +++ b/docs/markdown/04-data-fetching/12-server-parallel-pattern.md @@ -1,6 +1,6 @@ -# Fetching from the server +# 1. Fetching from the server ## parallel fetching patterns diff --git a/docs/markdown/04-data-fetching/13-server-parallel.md b/docs/markdown/04-data-fetching/13-server-parallel.md index 8d8616e..6177468 100644 --- a/docs/markdown/04-data-fetching/13-server-parallel.md +++ b/docs/markdown/04-data-fetching/13-server-parallel.md @@ -1,6 +1,6 @@ -# Fetching from the server +# 1. Fetching from the server ## parallel fetching patterns diff --git a/docs/markdown/04-data-fetching/14-server-security.md b/docs/markdown/04-data-fetching/14-server-security.md index 7b3ad46..d937d9a 100644 --- a/docs/markdown/04-data-fetching/14-server-security.md +++ b/docs/markdown/04-data-fetching/14-server-security.md @@ -1,6 +1,6 @@ -# Fetching from the server +# 1. Fetching from the server ## security diff --git a/docs/markdown/04-data-fetching/20-client-handler.md b/docs/markdown/04-data-fetching/20-client-handler.md index ed10b25..45def64 100644 --- a/docs/markdown/04-data-fetching/20-client-handler.md +++ b/docs/markdown/04-data-fetching/20-client-handler.md @@ -7,7 +7,7 @@ } -# Fetching from the client +# 2. Fetching from the client ## Route handlers diff --git a/docs/markdown/04-data-fetching/21-client-handler-convention.md b/docs/markdown/04-data-fetching/21-client-handler-convention.md index 060098f..55743dd 100644 --- a/docs/markdown/04-data-fetching/21-client-handler-convention.md +++ b/docs/markdown/04-data-fetching/21-client-handler-convention.md @@ -12,7 +12,7 @@ } -# Fetching from the client +# 2. Fetching from the client ## Route handlers diff --git a/docs/markdown/04-data-fetching/22-client-handler-request.md b/docs/markdown/04-data-fetching/22-client-handler-request.md index d87886b..23100a6 100644 --- a/docs/markdown/04-data-fetching/22-client-handler-request.md +++ b/docs/markdown/04-data-fetching/22-client-handler-request.md @@ -1,6 +1,6 @@ -# Fetching from the client +# 2. Fetching from the client ## Reading request diff --git a/docs/markdown/04-data-fetching/23-client-handler-headers.md b/docs/markdown/04-data-fetching/23-client-handler-headers.md index 87033cd..9cac3d7 100644 --- a/docs/markdown/04-data-fetching/23-client-handler-headers.md +++ b/docs/markdown/04-data-fetching/23-client-handler-headers.md @@ -1,6 +1,6 @@ -# Fetching from the client +# 2. Fetching from the client ## Reading request diff --git a/docs/markdown/04-data-fetching/24-client-fetch.md b/docs/markdown/04-data-fetching/24-client-fetch.md index 8a1f461..2e53b5f 100644 --- a/docs/markdown/04-data-fetching/24-client-fetch.md +++ b/docs/markdown/04-data-fetching/24-client-fetch.md @@ -1,6 +1,6 @@ -# Fetching from the client +# 2. Fetching from the client **Using fetch API** diff --git a/docs/markdown/04-data-fetching/41-memoization.md b/docs/markdown/04-data-fetching/41-memoization.md index 7d79437..c787532 100644 --- a/docs/markdown/04-data-fetching/41-memoization.md +++ b/docs/markdown/04-data-fetching/41-memoization.md @@ -1,4 +1,4 @@ - + -# Request memoization +# Caching -- Where ? On the server -- What is cached ? Return value of functions -- How long ? One cache per request -- Why ? Sharing data in React component tree - -
+## 1/4 Request memoization -- By default : only for GET requests using fetch +##==## + +# Caching + +## 1/4 Request memoization + +- Where ? On the server +- What is cached ? Return value of functions (by default : GET requests) +- How long ? One cache per request +- Why ? Sharing data in React component tree diff --git a/docs/markdown/04-data-fetching/42-memoization-example.md b/docs/markdown/04-data-fetching/42-memoization-example.md index 8e1bd42..577d0bf 100644 --- a/docs/markdown/04-data-fetching/42-memoization-example.md +++ b/docs/markdown/04-data-fetching/42-memoization-example.md @@ -1,8 +1,10 @@ -# Request memoization +# Caching -## Example +## 1/4 Request memoization + +Example : ```jsx export async function generateMetadata({ params }) { diff --git a/docs/markdown/04-data-fetching/43-memoisation-third.md b/docs/markdown/04-data-fetching/43-memoisation-third.md index 5d723d6..aaf38ac 100644 --- a/docs/markdown/04-data-fetching/43-memoisation-third.md +++ b/docs/markdown/04-data-fetching/43-memoisation-third.md @@ -1,12 +1,13 @@ -# Request memoization +# Caching -## What if I'm not using fetch ? +## 1/4 Request memoization +**What if I'm not using fetch ?**
You can use React cache function to memoize functions : -```jsx +```jsx [1, 6-9, 13, 21] import { cache } from 'react'; import apolloClient from '@/apollo'; diff --git a/docs/markdown/04-data-fetching/44-data.md b/docs/markdown/04-data-fetching/44-data.md index 79c4828..35e18fb 100644 --- a/docs/markdown/04-data-fetching/44-data.md +++ b/docs/markdown/04-data-fetching/44-data.md @@ -1,7 +1,7 @@ - + -# Data cache +# Caching + +## 2/4 Data cache + + + +##==## + +# Caching + +## 2/4 Data cache - Where ? On the server - What is cached ? Data (from API requests) - How long ? Persistent or TTL (or until explicit revalidation) - Why ? Store data accross users and deployments - - diff --git a/docs/markdown/04-data-fetching/45-data-ttl.md b/docs/markdown/04-data-fetching/45-data-ttl.md index d69f9e2..f802bb9 100644 --- a/docs/markdown/04-data-fetching/45-data-ttl.md +++ b/docs/markdown/04-data-fetching/45-data-ttl.md @@ -1,8 +1,10 @@ -# Data cache +# Caching -## Revalidating : time based (TTL) +## 2/4 Data cache + +Revalidating : time based (TTL) ```jsx export default function Page({ params }) { diff --git a/docs/markdown/04-data-fetching/46-data-ttl-behavior.md b/docs/markdown/04-data-fetching/46-data-ttl-behavior.md index 27382ae..9453b19 100644 --- a/docs/markdown/04-data-fetching/46-data-ttl-behavior.md +++ b/docs/markdown/04-data-fetching/46-data-ttl-behavior.md @@ -8,9 +8,9 @@ } -# Data cache +# Caching -## Revalidating : time based (TTL) +## 2/4 Data cache Time based revalidation has a "stale-while-revalidate" behavior : diff --git a/docs/markdown/04-data-fetching/47-data-on-demand.md b/docs/markdown/04-data-fetching/47-data-on-demand.md index 1404a42..8d7923f 100644 --- a/docs/markdown/04-data-fetching/47-data-on-demand.md +++ b/docs/markdown/04-data-fetching/47-data-on-demand.md @@ -10,9 +10,11 @@ -# Data cache +# Caching -## Revalidating : on demand +## 2/4 Data cache + +Revalidating : on demand from route handlers or server actions 1. Using route pathname : @@ -23,6 +25,10 @@ revalidatePath('/employees/1234'); revalidatePath('/employees/[id]/page', 'page'); ``` +##--## + +




+
2. Using tags : @@ -44,17 +50,3 @@ revalidateTag('employees');
- -##--## - -

- -
- -Where can you do this ? - -- In route handlers -- In server actions - -
- diff --git a/docs/markdown/04-data-fetching/48-data-third.md b/docs/markdown/04-data-fetching/48-data-third.md index 543fc7a..4b5211d 100644 --- a/docs/markdown/04-data-fetching/48-data-third.md +++ b/docs/markdown/04-data-fetching/48-data-third.md @@ -10,11 +10,11 @@ -# Data cache +# Caching -## What if I'm not using fetch ? +## 2/4 Data cache -You can use **unstable_cache** method from Next.js to wrap the third party methods : +**What if I'm not using fetch ?** -> You can use **unstable_cache** method from Next.js : ```jsx // In a server component, use unstable_cache to wrap the third party code : diff --git a/docs/markdown/04-data-fetching/50-route-cache.md b/docs/markdown/04-data-fetching/50-route-cache.md index cadc1a7..7f9d29e 100644 --- a/docs/markdown/04-data-fetching/50-route-cache.md +++ b/docs/markdown/04-data-fetching/50-route-cache.md @@ -1,4 +1,4 @@ - + -# Full route caching +# Caching + +## 3/4 Full route caching + + + +##==## + +# Caching + +## 3/4 Full route caching - Where ? On the server - What is cached ? HTML + RSC payload - How long ? Persistend or TTL - Why ? Prevent useless re-renders - - diff --git a/docs/markdown/04-data-fetching/51-route-cache-configuration.md b/docs/markdown/04-data-fetching/51-route-cache-configuration.md index 117d0d7..bda3afc 100644 --- a/docs/markdown/04-data-fetching/51-route-cache-configuration.md +++ b/docs/markdown/04-data-fetching/51-route-cache-configuration.md @@ -1,8 +1,10 @@ -# Full route caching +# Caching -## Configuration +## 3/4 Full route caching + +**Configuration** This depends on the rendering method (static vs. dynamic).

diff --git a/docs/markdown/04-data-fetching/60-router-browser-cache.md b/docs/markdown/04-data-fetching/60-router-browser-cache.md index 1d052af..12156d5 100644 --- a/docs/markdown/04-data-fetching/60-router-browser-cache.md +++ b/docs/markdown/04-data-fetching/60-router-browser-cache.md @@ -1,4 +1,4 @@ - + -# Router caching +# Caching + +## 4/4 Router caching + + + +##==## + +# Caching + +## 4/4 Router caching - Where ? On the browser - What is cached ? HTML + RSC payload - How long ? Session or TTL (automatic invalidation period) - Why ? Reduce client / server requests. And allows instant navigation - - diff --git a/docs/markdown/04-data-fetching/61-router-browser-cache-configuration.md b/docs/markdown/04-data-fetching/61-router-browser-cache-configuration.md index 032cc32..8b98f6a 100644 --- a/docs/markdown/04-data-fetching/61-router-browser-cache-configuration.md +++ b/docs/markdown/04-data-fetching/61-router-browser-cache-configuration.md @@ -1,20 +1,23 @@ -# Router caching +# Caching + +## 4/4 Router caching **Behavior** -The behavior depends on two factors : +The behavior depends on two factors :

-1. Browser session +1. Browser session

2. Automatic TTL, depending on prefetching : - -- default : dynamic pages are not cached / static pages are cached for 5 minutes -- full prefetching (prefetch={true}) 5 minutes + - default : dynamic pages are not cached / static pages are cached for 5 minutes + - full prefetching (prefetch={true}) 5 minutes ##--##

+
+ **Configuring** It's possible to override default TTLs : @@ -31,3 +34,7 @@ const nextConfig = { module.exports = nextConfig; ``` + +
+ + diff --git a/docs/markdown/05-mutations/01-intro.md b/docs/markdown/05-mutations/01-intro.md index 69a0730..f6aaf6f 100644 --- a/docs/markdown/05-mutations/01-intro.md +++ b/docs/markdown/05-mutations/01-intro.md @@ -2,15 +2,27 @@ # What are server actions ? -Asynchronous functions executed on the server
A way of executing code on the server without making an explicit fetch call
-React feature (not Next.js specific) +- Asynchronous functions executed on the server +- A way of executing code on the server without making an explicit fetch call
+- React feature (not Next.js specific) + +
**Where?** -- Can be called in server components -- Can be called in client components +- Can be called from server components +- Can be called from client components + +
+ + +
**For what?** - To handle form submissions - To handle data mutation + +
+ + diff --git a/docs/markdown/05-mutations/02-behavior-without.md b/docs/markdown/05-mutations/02-behavior-without.md index 4b096b1..bfbc2ff 100644 --- a/docs/markdown/05-mutations/02-behavior-without.md +++ b/docs/markdown/05-mutations/02-behavior-without.md @@ -6,8 +6,8 @@ } -# Behavior +# What are server actions ? -## Without server action +## Behavior : without server action diff --git a/docs/markdown/05-mutations/03-behavior-with.md b/docs/markdown/05-mutations/03-behavior-with.md index 9538a02..2fb8009 100644 --- a/docs/markdown/05-mutations/03-behavior-with.md +++ b/docs/markdown/05-mutations/03-behavior-with.md @@ -7,8 +7,8 @@ } -# Behavior +# What are server actions ? -## With server action +## Behavior : with server action diff --git a/docs/markdown/05-mutations/04-behavior.md b/docs/markdown/05-mutations/04-behavior.md index d07ce84..2862a94 100644 --- a/docs/markdown/05-mutations/04-behavior.md +++ b/docs/markdown/05-mutations/04-behavior.md @@ -1,7 +1,7 @@ -# Behavior +# What are server actions ? -- Window is not refreshed +- Window is not refreshed, only re-rendered - Allows progressive enhancement (works if JavaScript is not loaded or disabled) - Can interact with cache and revalidation diff --git a/docs/markdown/05-mutations/10-conventions-definition.md b/docs/markdown/05-mutations/10-conventions-definition.md index b463a37..45e7f1d 100644 --- a/docs/markdown/05-mutations/10-conventions-definition.md +++ b/docs/markdown/05-mutations/10-conventions-definition.md @@ -1,8 +1,8 @@ -# Conventions +# Server actions -## Defining a server action +## Conventions **Server actions can be defined in separate modules :** @@ -17,7 +17,9 @@ const createUser = () => { 'use server' has to be specified at the top level -**Or directly in a server component with an inline function :** +
+ +**Or inlined in a server component body :** ```jsx // MyComponent.tsx @@ -28,3 +30,6 @@ const MyComponent = () => { } }; ``` + +
+ diff --git a/docs/markdown/05-mutations/11-conventions-using.md b/docs/markdown/05-mutations/11-conventions-using.md index 1994a72..6e9d88c 100644 --- a/docs/markdown/05-mutations/11-conventions-using.md +++ b/docs/markdown/05-mutations/11-conventions-using.md @@ -1,11 +1,10 @@ -# Conventions +# Server actions -## Using a server action +## How to call it ? Simply import it and use it as a regular function
-_Note : this function is asynchronous_ ```js // MyComponent.tsx (can be client or server component) @@ -15,3 +14,7 @@ const MyComponent = () => { return
...
; }; ``` + +
+ +_Note : this function is asynchronous_ diff --git a/docs/markdown/05-mutations/12-conventions-prop.md b/docs/markdown/05-mutations/12-conventions-prop.md index 7e462e4..69903bd 100644 --- a/docs/markdown/05-mutations/12-conventions-prop.md +++ b/docs/markdown/05-mutations/12-conventions-prop.md @@ -1,6 +1,6 @@ -# Conventions +# Server actions ## Passing as a prop diff --git a/docs/markdown/05-mutations/13-other-than-form.md b/docs/markdown/05-mutations/13-other-than-form.md index 4472ded..af2a58b 100644 --- a/docs/markdown/05-mutations/13-other-than-form.md +++ b/docs/markdown/05-mutations/13-other-than-form.md @@ -1,6 +1,6 @@ -# Conventions +# Server actions ## Not only for forms diff --git a/docs/markdown/05-mutations/14-params.md b/docs/markdown/05-mutations/14-params.md index 038fdb3..fb7ce08 100644 --- a/docs/markdown/05-mutations/14-params.md +++ b/docs/markdown/05-mutations/14-params.md @@ -1,10 +1,12 @@ -# Arguments - using forms +# Server actions + +## Arguments (using form) The server action receives FormData as argument : -```jsx +```jsx [2-6, 9] const MyComponent = () => { async function createUser(formData) { 'use server'; @@ -23,11 +25,13 @@ const MyComponent = () => { ##--## +
+ **Additional arguments** It's possible to pass additional arguments without the need to render hidden inputs : -```jsx +```jsx [2, 8, 11] const MyComponent = ({ userId }) => { async function editUser(userId, formData) { 'use server'; @@ -47,3 +51,6 @@ const MyComponent = ({ userId }) => { ``` _The first action argument is then the binded variable_ + +
+ diff --git a/docs/markdown/05-mutations/15-params-invocation.md b/docs/markdown/05-mutations/15-params-invocation.md index 0746375..fe929d8 100644 --- a/docs/markdown/05-mutations/15-params-invocation.md +++ b/docs/markdown/05-mutations/15-params-invocation.md @@ -1,8 +1,13 @@ -# Arguments - using action invocation + -It's possible to passe arguments to server action : +# Server actions -```jsx +## Arguments (using function invocation) + +When calling it directly as a function, it's possible to pass arguments : + +```jsx [7-9] +'use client'; import { createUser } from './actions'; const ClientComponent = () => { @@ -18,6 +23,10 @@ const ClientComponent = () => { }; ``` +##--## + +





+ ```jsx //actions.ts 'use server'; @@ -26,4 +35,4 @@ export const createUser = async (username, email) => { }; ``` -_this arguments have to be serializable_ +_this arguments must be serializable as JSON_ diff --git a/docs/markdown/05-mutations/16-security.md b/docs/markdown/05-mutations/16-security.md index 58d16c7..fec7f3c 100644 --- a/docs/markdown/05-mutations/16-security.md +++ b/docs/markdown/05-mutations/16-security.md @@ -1,10 +1,14 @@ - + -# Security considerations +# Server actions + +## Security considerations Like route handlers, server-actions works with public HTTP calls. This requires security precautions -**Authorization** +
+ +**1. Authorization** Make sure that users are authorized to perform an action or to access the data : @@ -22,3 +26,6 @@ export async function approveExpense() { // Mutations & server operations } ``` + +
+ diff --git a/docs/markdown/05-mutations/17-security-closure.md b/docs/markdown/05-mutations/17-security-closure.md index 0257af4..ed18f90 100644 --- a/docs/markdown/05-mutations/17-security-closure.md +++ b/docs/markdown/05-mutations/17-security-closure.md @@ -1,10 +1,12 @@ - + -# Security considerations +# Server actions -**Closures** +## Security considerations -Server actions inside component is a closure : the action has access to the outer function's scope (like sensitive variables).
+**2. Closures** + +Inline server actions are closures : the action has access to the outer function's scope (like sensitive variables).
```jsx // MyComponent.tsx @@ -22,10 +24,12 @@ This is useful to capture snapshot of the data ##--## +
+

-- Closure variables are part of the action definition -- It's then send to the client and back to the server when action is triggered +- Closure variables are part of the action definition, during the action lifecycle +- It's sent to the client and back to the server when action is triggered - Next.js automatically encrypts those - A private key is generated for each action and each build @@ -36,3 +40,6 @@ To define an encryption key explicitly : ``` process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY ``` + +
+ diff --git a/docs/markdown/05-mutations/18-security-origins.md b/docs/markdown/05-mutations/18-security-origins.md index 11f31a3..0124873 100644 --- a/docs/markdown/05-mutations/18-security-origins.md +++ b/docs/markdown/05-mutations/18-security-origins.md @@ -1,8 +1,10 @@ - + -# Security considerations +# Server actions -**Restrict origins** +## Security considerations + +**3. Restrict origins** Server Actions can only be invoked on the same host as the page that hosts it (Internal checks by the framework)

But when using reverse proxy or multiple backend architecture, it's possible to restrict the allowed origins for server actions : diff --git a/docs/markdown/05-mutations/19-how-to-chose.md b/docs/markdown/05-mutations/19-how-to-chose.md index 9c753f5..8ee3ac2 100644 --- a/docs/markdown/05-mutations/19-how-to-chose.md +++ b/docs/markdown/05-mutations/19-how-to-chose.md @@ -1,4 +1,4 @@ - + -# How to choose between server action and route handler ? +# Server actions + +## Server action vs Route handler : How to choose ? diff --git a/docs/markdown/06-error-management/01-intro.md b/docs/markdown/06-error-management/01-intro.md index 0c39d67..848bc71 100644 --- a/docs/markdown/06-error-management/01-intro.md +++ b/docs/markdown/06-error-management/01-intro.md @@ -2,5 +2,7 @@ # Error Management -- Error boundaries : JavaScript exceptions, API errors, unexpected errors, unhandled errors ... -- Expected errors : 404 pages +## What will we see ? + +- **1. Error boundaries** : JavaScript exceptions, API errors, unexpected errors, unhandled errors ... +- **2. Expected errors** : 404 pages and redirections diff --git a/docs/markdown/06-error-management/32-not-found.md b/docs/markdown/06-error-management/32-not-found.md index b8d84ec..584c584 100644 --- a/docs/markdown/06-error-management/32-not-found.md +++ b/docs/markdown/06-error-management/32-not-found.md @@ -26,7 +26,9 @@ This component is rendered in two cases : - When a segment is unknown to the router - When invoking **notFound** method explicitly : -```jsx +```jsx [1,6] +import { notFound } from 'next/navigation' + export default async function User({ params }) { const user = await fetchUser(params.id) diff --git a/docs/markdown/07-middleware/16-rewrite-advanced.md b/docs/markdown/07-middleware/16-rewrite-advanced.md index ab43a69..b9b779e 100644 --- a/docs/markdown/07-middleware/16-rewrite-advanced.md +++ b/docs/markdown/07-middleware/16-rewrite-advanced.md @@ -10,8 +10,8 @@ Detailed configuration : 2. redirects - next.config.js 3. middleware 4. rewrites | beforeFiles - next.config.js -5. routes (/public, /\_next/..., /app...) -6. rewrites | afterFiles - next.config.js +5. routes (/public, /\_next/..., /app...) +6. rewrites | afterFiles - next.config.js 7. dynamic routes (/[slug]/page.tsx ...) 8. rewrites | fallback - next.config.js diff --git a/docs/markdown/07-middleware/30-middleware.md b/docs/markdown/07-middleware/30-middleware.md index d91bd05..6db73e3 100644 --- a/docs/markdown/07-middleware/30-middleware.md +++ b/docs/markdown/07-middleware/30-middleware.md @@ -1,6 +1,6 @@ -# middleware +# Middleware Limits of next.config.js : diff --git a/docs/markdown/07-middleware/31-definition.md b/docs/markdown/07-middleware/31-definition.md index 56b7610..311e5c0 100644 --- a/docs/markdown/07-middleware/31-definition.md +++ b/docs/markdown/07-middleware/31-definition.md @@ -1,6 +1,6 @@ -# middleware +# Middleware What is next.js middleware ?
@@ -11,12 +11,13 @@ allows to catch the incoming request and : - redirect - modify request headers - modify response headers - - return early - produce and return an early response ##--## -


+
+ +


Runs before caching content / route matching : @@ -28,3 +29,6 @@ Runs before caching content / route matching : 6. rewrites | afterFiles - next.config.js 7. dynamic routes (/[slug]/page.tsx ...) 8. rewrites | fallback - next.config.js + +
+ diff --git a/docs/markdown/07-middleware/32-use-cases.md b/docs/markdown/07-middleware/32-use-cases.md index f79716e..e6842c0 100644 --- a/docs/markdown/07-middleware/32-use-cases.md +++ b/docs/markdown/07-middleware/32-use-cases.md @@ -1,6 +1,6 @@ -# middleware +# Middleware ## Use cases @@ -9,3 +9,4 @@ - Bot detection - Complex URL rewriting - Logging / Analytics +- ... diff --git a/docs/markdown/07-middleware/33-convention.md b/docs/markdown/07-middleware/33-convention.md index 0131833..fd691af 100644 --- a/docs/markdown/07-middleware/33-convention.md +++ b/docs/markdown/07-middleware/33-convention.md @@ -1,6 +1,6 @@ -# middleware +# Middleware ## Conventions diff --git a/docs/markdown/07-middleware/34-url-matching.md b/docs/markdown/07-middleware/34-url-matching.md index 275c62d..7783fd7 100644 --- a/docs/markdown/07-middleware/34-url-matching.md +++ b/docs/markdown/07-middleware/34-url-matching.md @@ -1,6 +1,8 @@ -# Request matching +# Middleware + +## Request matching **There are two ways to filter the requests**
diff --git a/docs/markdown/07-middleware/35-api-modify.md b/docs/markdown/07-middleware/35-api-modify.md index 6745f58..cf7f86f 100644 --- a/docs/markdown/07-middleware/35-api-modify.md +++ b/docs/markdown/07-middleware/35-api-modify.md @@ -1,6 +1,8 @@ -# API +# Middleware + +## API Modify response : @@ -28,6 +30,8 @@ export function middleware(request) {

+
+ Modify request : ```js @@ -54,3 +58,6 @@ export function middleware(request) { return response; } ``` + +
+ diff --git a/docs/markdown/07-middleware/36-api-rewrite-redirect.md b/docs/markdown/07-middleware/36-api-rewrite-redirect.md index 4e67d98..0b885c8 100644 --- a/docs/markdown/07-middleware/36-api-rewrite-redirect.md +++ b/docs/markdown/07-middleware/36-api-rewrite-redirect.md @@ -1,6 +1,8 @@ -# API +# Middleware + +## API **Rewrite** response to display another URL : @@ -18,6 +20,8 @@ export function middleware(request: NextRequest) {


+
+ **Redirect** the incoming request to a different URL : ```js @@ -29,3 +33,6 @@ export function middleware(request) { } } ``` + +
+ diff --git a/docs/markdown/07-middleware/37-api-return.md b/docs/markdown/07-middleware/37-api-return.md index 5d01cf2..af7be0a 100644 --- a/docs/markdown/07-middleware/37-api-return.md +++ b/docs/markdown/07-middleware/37-api-return.md @@ -1,6 +1,8 @@ -# API +# Middleware + +## API You can also produce a response early diff --git a/docs/markdown/07-middleware/38-warning.md b/docs/markdown/07-middleware/38-warning.md index 5f15598..62bf996 100644 --- a/docs/markdown/07-middleware/38-warning.md +++ b/docs/markdown/07-middleware/38-warning.md @@ -1,11 +1,20 @@ -# Warning +# Middleware + +## Warning - Middleware is on the critical path : - avoid heavy operations & long tasks +
+ +

+ - Middleware does not run on a normal nodejs runtime : - Native Node.js APIs are not supported (example : filesystem) - only ES Modules node_modules are supported + +
+ diff --git a/docs/markdown/08-rendering-methods/10-ssr.md b/docs/markdown/08-rendering-methods/10-ssr.md index cadde45..f440f6e 100644 --- a/docs/markdown/08-rendering-methods/10-ssr.md +++ b/docs/markdown/08-rendering-methods/10-ssr.md @@ -7,6 +7,8 @@ } -# Dynamic rendering +# Rendering methods + +## Dynamic rendering (SSR) diff --git a/docs/markdown/08-rendering-methods/11-pro-cons.md b/docs/markdown/08-rendering-methods/11-pro-cons.md index eb1a5bf..334a9c5 100644 --- a/docs/markdown/08-rendering-methods/11-pro-cons.md +++ b/docs/markdown/08-rendering-methods/11-pro-cons.md @@ -1,6 +1,8 @@ -# Dynamic rendering +# Rendering methods + +## Dynamic rendering (SSR) **Pros** diff --git a/docs/markdown/08-rendering-methods/20-static-rendering.md b/docs/markdown/08-rendering-methods/20-static-rendering.md index d6118c0..647ab80 100644 --- a/docs/markdown/08-rendering-methods/20-static-rendering.md +++ b/docs/markdown/08-rendering-methods/20-static-rendering.md @@ -7,7 +7,9 @@ } -# Static rendering +# Rendering methods + +## Static rendering _This is the default behavior. If all conditions are set, Next will always prioritize this rendering method_ diff --git a/docs/markdown/08-rendering-methods/21-static-rendering-schema.md b/docs/markdown/08-rendering-methods/21-static-rendering-schema.md index 6ff0af9..7d78bd0 100644 --- a/docs/markdown/08-rendering-methods/21-static-rendering-schema.md +++ b/docs/markdown/08-rendering-methods/21-static-rendering-schema.md @@ -7,9 +7,11 @@ } -# Static rendering +# Rendering methods -## Conditions +## Static rendering + +**Conditions :** - The route data is not personalized to the user (no dynamic function) - cookies diff --git a/docs/markdown/08-rendering-methods/22-static-rendering-config.md b/docs/markdown/08-rendering-methods/22-static-rendering-config.md index 331d7b6..646bf4d 100644 --- a/docs/markdown/08-rendering-methods/22-static-rendering-config.md +++ b/docs/markdown/08-rendering-methods/22-static-rendering-config.md @@ -1,8 +1,8 @@ -# Static rendering +# Rendering methods -## Configuration +## Static rendering Static rendering can be configured using [route segment configuration](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config) diff --git a/docs/markdown/08-rendering-methods/30-incremental.md b/docs/markdown/08-rendering-methods/30-incremental.md index d1b7beb..8ae3669 100644 --- a/docs/markdown/08-rendering-methods/30-incremental.md +++ b/docs/markdown/08-rendering-methods/30-incremental.md @@ -1,6 +1,8 @@ -# Incremental Static Rendering +# Rendering methods + +## Incremental Static Rendering (ISR) By default, dynamic routes (_/[id]/page.tsx_) can't be known at build time
But there is a way to generate them : diff --git a/docs/markdown/08-rendering-methods/31-incremental-schema.md b/docs/markdown/08-rendering-methods/31-incremental-schema.md index 7f88e4a..80457c2 100644 --- a/docs/markdown/08-rendering-methods/31-incremental-schema.md +++ b/docs/markdown/08-rendering-methods/31-incremental-schema.md @@ -7,7 +7,9 @@ } -# Incremental Static Rendering +# Rendering methods + +## Incremental Static Rendering (ISR) ```js export const generateStaticParams = async () => { diff --git a/docs/markdown/08-rendering-methods/32-incremental-example.md b/docs/markdown/08-rendering-methods/32-incremental-example.md index 23f757d..eb30fd6 100644 --- a/docs/markdown/08-rendering-methods/32-incremental-example.md +++ b/docs/markdown/08-rendering-methods/32-incremental-example.md @@ -1,8 +1,10 @@ -# Incremental Static Rendering +# Rendering methods -## Examples +## Incremental Static Rendering (ISR) + +**Examples** Single dynamic segment @@ -22,6 +24,8 @@ export const generateStaticParams = () => {

+
+ Multiple dynamic segment ```js @@ -39,3 +43,6 @@ export const generateStaticParams = () => { // - /employee/b/2 // - /employee/c/3 ``` + +
+ diff --git a/docs/markdown/08-rendering-methods/33-incremental-example2.md b/docs/markdown/08-rendering-methods/33-incremental-example2.md index 13aee36..9f417e3 100644 --- a/docs/markdown/08-rendering-methods/33-incremental-example2.md +++ b/docs/markdown/08-rendering-methods/33-incremental-example2.md @@ -1,8 +1,10 @@ -# Incremental Static Rendering +# Rendering methods -## Examples +## Incremental Static Rendering (ISR) + +**Examples** Catch-all dynamic segment @@ -22,6 +24,8 @@ export const generateStaticParams = () => {

+
+ Parent / Children page segments : ```js @@ -38,3 +42,6 @@ export const generateStaticParams = async ({ params: { category } }) => { return employees.map((employee) => ({ id: employee.id })); }; ``` + +
+ diff --git a/docs/markdown/08-rendering-methods/34-incremental-runtime.md b/docs/markdown/08-rendering-methods/34-incremental-runtime.md index c1abc46..8b0eacd 100644 --- a/docs/markdown/08-rendering-methods/34-incremental-runtime.md +++ b/docs/markdown/08-rendering-methods/34-incremental-runtime.md @@ -1,4 +1,4 @@ - + -# Incremental Static Rendering +# Rendering methods + +## Incremental Static Rendering (ISR) What if a page params are not known at build time ?