From ce96008fc8a6fe8ecb453486874655b51b52e994 Mon Sep 17 00:00:00 2001 From: xiaoyu2er Date: Mon, 2 Jun 2025 19:48:18 +0000 Subject: [PATCH 1/2] docs: update documentation translations --- .../fr/blog/building-apis-with-nextjs.mdx | 396 ++++++++ .../content/fr/blog/composable-caching.mdx | 202 ++++ apps/docs/content/fr/blog/create-next-app.mdx | 39 + .../content/fr/blog/incremental-adoption.mdx | 109 +++ .../docs/content/fr/blog/june-2023-update.mdx | 148 +++ apps/docs/content/fr/blog/layouts-rfc.mdx | 911 ++++++++++++++++++ apps/docs/content/fr/blog/next-10-1.mdx | 229 +++++ apps/docs/content/fr/blog/next-10-2.mdx | 182 ++++ apps/docs/content/fr/blog/next-10.mdx | 429 +++++++++ apps/docs/content/fr/blog/next-11-1.mdx | 183 ++++ apps/docs/content/fr/blog/next-11.mdx | 219 +++++ apps/docs/content/fr/blog/next-12-1.mdx | 218 +++++ apps/docs/content/fr/blog/next-12-2.mdx | 271 ++++++ apps/docs/content/fr/blog/next-12-3.mdx | 181 ++++ apps/docs/content/fr/blog/next-12.mdx | 270 ++++++ apps/docs/content/fr/blog/next-13-1.mdx | 217 +++++ apps/docs/content/fr/blog/next-13-2.mdx | 374 +++++++ apps/docs/content/fr/blog/next-13-3.mdx | 273 ++++++ apps/docs/content/fr/blog/next-13-4.mdx | 466 +++++++++ apps/docs/content/fr/blog/next-13-5.mdx | 179 ++++ apps/docs/content/fr/blog/next-13.mdx | 430 +++++++++ apps/docs/content/fr/blog/next-14-1.mdx | 271 ++++++ apps/docs/content/fr/blog/next-14-2.mdx | 218 +++++ apps/docs/content/fr/blog/next-14.mdx | 297 ++++++ apps/docs/content/fr/blog/next-15-1.mdx | 294 ++++++ apps/docs/content/fr/blog/next-15-2.mdx | 230 +++++ apps/docs/content/fr/blog/next-15-3.mdx | 206 ++++ apps/docs/content/fr/blog/next-15-rc.mdx | 347 +++++++ apps/docs/content/fr/blog/next-15-rc2.mdx | 405 ++++++++ apps/docs/content/fr/blog/next-15.mdx | 571 +++++++++++ apps/docs/content/fr/blog/next-5-1.mdx | 184 ++++ apps/docs/content/fr/blog/next-5.mdx | 362 +++++++ apps/docs/content/fr/blog/next-6-1.mdx | 141 +++ apps/docs/content/fr/blog/next-6.mdx | 175 ++++ apps/docs/content/fr/blog/next-7.mdx | 388 ++++++++ apps/docs/content/fr/blog/next-8-0-4.mdx | 174 ++++ apps/docs/content/fr/blog/next-8-1.mdx | 146 +++ apps/docs/content/fr/blog/next-8.mdx | 349 +++++++ apps/docs/content/fr/blog/next-9-0-7.mdx | 255 +++++ apps/docs/content/fr/blog/next-9-1-7.mdx | 217 +++++ apps/docs/content/fr/blog/next-9-1.mdx | 196 ++++ apps/docs/content/fr/blog/next-9-2.mdx | 219 +++++ apps/docs/content/fr/blog/next-9-3.mdx | 534 ++++++++++ apps/docs/content/fr/blog/next-9-4.mdx | 297 ++++++ apps/docs/content/fr/blog/next-9-5.mdx | 399 ++++++++ apps/docs/content/fr/blog/next-9.mdx | 439 +++++++++ .../fr/blog/our-journey-with-caching.mdx | 219 +++++ ...urity-nextjs-server-components-actions.mdx | 393 ++++++++ .../fr/blog/styling-next-with-styled-jsx.mdx | 373 +++++++ .../blog/turbopack-for-development-stable.mdx | 295 ++++++ apps/docs/content/fr/blog/webpack-memory.mdx | 95 ++ .../01-what-is-react-and-nextjs.mdx | 71 ++ .../01-react-foundations/02-rendering-ui.mdx | 45 + .../03-updating-ui-with-javascript.mdx | 137 +++ .../04-getting-started-with-react.mdx | 148 +++ .../05-building-ui-with-components.mdx | 191 ++++ .../06-displaying-data-with-props.mdx | 253 +++++ .../07-updating-state.mdx | 199 ++++ .../08-from-react-to-nextjs.mdx | 68 ++ .../01-react-foundations/09-installation.mdx | 179 ++++ .../10-server-and-client-components.mdx | 166 ++++ .../fr/learn/01-react-foundations/index.mdx | 31 + .../02-dashboard-app/01-getting-started.mdx | 145 +++ .../learn/02-dashboard-app/02-css-styling.mdx | 179 ++++ .../03-optimizing-fonts-images.mdx | 203 ++++ .../04-creating-layouts-and-pages.mdx | 150 +++ .../05-navigating-between-pages.mdx | 152 +++ .../06-setting-up-your-database.mdx | 131 +++ .../02-dashboard-app/07-fetching-data.mdx | 303 ++++++ .../08-static-and-dynamic-rendering.mdx | 78 ++ .../learn/02-dashboard-app/09-streaming.mdx | 348 +++++++ .../10-partial-prerendering.mdx | 110 +++ .../11-adding-search-and-pagination.mdx | 558 +++++++++++ .../02-dashboard-app/12-mutating-data.mdx | 659 +++++++++++++ .../02-dashboard-app/13-error-handling.mdx | 203 ++++ .../14-improving-accessibility.mdx | 369 +++++++ .../15-adding-authentication.mdx | 477 +++++++++ .../02-dashboard-app/16-adding-metadata.mdx | 163 ++++ .../fr/learn/02-dashboard-app/index.mdx | 69 ++ .../01-create-nextjs-app-setup.mdx | 45 + ...02-create-nextjs-app-welcome-to-nextjs.mdx | 15 + .../03-create-nextjs-app-editing-the-page.mdx | 28 + .../04-navigate-between-pages.mdx | 22 + .../05-navigate-between-pages-setup.mdx | 21 + ...navigate-between-pages-pages-in-nextjs.mdx | 42 + ...-navigate-between-pages-link-component.mdx | 60 ++ .../08-navigate-between-pages-client-side.mdx | 43 + ...9-assets-metadata-css-layout-component.mdx | 87 ++ .../10-assets-metadata-css.mdx | 30 + .../11-assets-metadata-css-setup.mdx | 21 + .../12-assets-metadata-css-assets.mdx | 74 ++ .../13-assets-metadata-css-metadata.mdx | 58 ++ ...ts-metadata-css-third-party-javascript.mdx | 78 ++ .../15-assets-metadata-css-css-styling.mdx | 29 + .../16-assets-metadata-css-global-styles.mdx | 97 ++ ...7-assets-metadata-css-polishing-layout.mdx | 214 ++++ .../18-assets-metadata-css-styling-tips.mdx | 107 ++ .../19-data-fetching-blog-data.mdx | 130 +++ .../03-pages-router/20-data-fetching.mdx | 20 + .../21-data-fetching-setup.mdx | 27 + .../22-data-fetching-pre-rendering.mdx | 40 + .../23-data-fetching-two-forms.mdx | 46 + .../24-data-fetching-with-data.mdx | 48 + ...data-fetching-implement-getstaticprops.mdx | 80 ++ ...6-data-fetching-getstaticprops-details.mdx | 59 ++ .../27-data-fetching-request-time.mdx | 67 ++ .../03-pages-router/28-dynamic-routes.mdx | 20 + .../29-dynamic-routes-setup.mdx | 27 + ...dynamic-routes-page-path-external-data.mdx | 75 ++ ...ynamic-routes-implement-getstaticpaths.mdx | 73 ++ ...ynamic-routes-implement-getstaticprops.mdx | 96 ++ .../33-dynamic-routes-render-markdown.mdx | 91 ++ .../34-dynamic-routes-polishing-post-page.mdx | 105 ++ ...35-dynamic-routes-polishing-index-page.mdx | 37 + ...-dynamic-routes-dynamic-routes-details.mdx | 112 +++ .../learn/03-pages-router/37-api-routes.mdx | 16 + .../03-pages-router/38-api-routes-setup.mdx | 27 + .../39-api-routes-creating-api-routes.mdx | 37 + .../40-api-routes-api-routes-details.mdx | 40 + .../41-deploying-nextjs-app.mdx | 22 + .../42-deploying-nextjs-app-setup.mdx | 27 + .../43-deploying-nextjs-app-github.mdx | 27 + .../44-deploying-nextjs-app-deploy.mdx | 38 + ...-deploying-nextjs-app-platform-details.mdx | 55 ++ ...oying-nextjs-app-other-hosting-options.mdx | 37 + .../fr/learn/03-pages-router/index.mdx | 53 + .../fr/learn/04-seo/01-importance-of-seo.mdx | 28 + .../fr/learn/04-seo/02-search-systems.mdx | 18 + .../fr/learn/04-seo/03-webcrawlers.mdx | 43 + .../learn/04-seo/04-crawling-and-indexing.mdx | 16 + .../fr/learn/04-seo/05-status-codes.mdx | 132 +++ .../content/fr/learn/04-seo/06-robots-txt.mdx | 36 + .../fr/learn/04-seo/07-xml-sitemaps.mdx | 107 ++ .../content/fr/learn/04-seo/08-metatags.mdx | 96 ++ .../content/fr/learn/04-seo/09-canonical.mdx | 61 ++ .../learn/04-seo/10-rendering-and-ranking.mdx | 19 + .../learn/04-seo/11-rendering-strategies.mdx | 41 + apps/docs/content/fr/learn/04-seo/12-amp.mdx | 15 + .../fr/learn/04-seo/13-url-structure.mdx | 122 +++ .../content/fr/learn/04-seo/14-metadata.mdx | 212 ++++ .../fr/learn/04-seo/15-on-page-seo.mdx | 81 ++ .../fr/learn/04-seo/16-web-performance.mdx | 23 + .../fr/learn/04-seo/17-vitals-overview.mdx | 24 + apps/docs/content/fr/learn/04-seo/18-lcp.mdx | 27 + apps/docs/content/fr/learn/04-seo/19-fid.mdx | 23 + apps/docs/content/fr/learn/04-seo/20-cls.mdx | 25 + .../content/fr/learn/04-seo/21-seo-impact.mdx | 40 + .../content/fr/learn/04-seo/22-improve.mdx | 19 + .../content/fr/learn/04-seo/23-lighthouse.mdx | 70 ++ .../content/fr/learn/04-seo/24-images.mdx | 85 ++ .../fr/learn/04-seo/25-dynamic-imports.mdx | 70 ++ .../04-seo/26-dynamic-import-components.mdx | 66 ++ .../docs/content/fr/learn/04-seo/27-fonts.mdx | 27 + .../learn/04-seo/28-third-party-scripts.mdx | 54 ++ .../content/fr/learn/04-seo/29-monitor.mdx | 17 + .../learn/04-seo/30-nextjs-speed-insights.mdx | 14 + .../fr/learn/04-seo/31-custom-reporting.mdx | 41 + .../fr/learn/04-seo/32-other-tools.mdx | 20 + .../fr/learn/04-seo/33-data-studio.mdx | 26 + apps/docs/content/fr/learn/04-seo/index.mdx | 28 + 160 files changed, 24729 insertions(+) create mode 100644 apps/docs/content/fr/blog/building-apis-with-nextjs.mdx create mode 100644 apps/docs/content/fr/blog/composable-caching.mdx create mode 100644 apps/docs/content/fr/blog/create-next-app.mdx create mode 100644 apps/docs/content/fr/blog/incremental-adoption.mdx create mode 100644 apps/docs/content/fr/blog/june-2023-update.mdx create mode 100644 apps/docs/content/fr/blog/layouts-rfc.mdx create mode 100644 apps/docs/content/fr/blog/next-10-1.mdx create mode 100644 apps/docs/content/fr/blog/next-10-2.mdx create mode 100644 apps/docs/content/fr/blog/next-10.mdx create mode 100644 apps/docs/content/fr/blog/next-11-1.mdx create mode 100644 apps/docs/content/fr/blog/next-11.mdx create mode 100644 apps/docs/content/fr/blog/next-12-1.mdx create mode 100644 apps/docs/content/fr/blog/next-12-2.mdx create mode 100644 apps/docs/content/fr/blog/next-12-3.mdx create mode 100644 apps/docs/content/fr/blog/next-12.mdx create mode 100644 apps/docs/content/fr/blog/next-13-1.mdx create mode 100644 apps/docs/content/fr/blog/next-13-2.mdx create mode 100644 apps/docs/content/fr/blog/next-13-3.mdx create mode 100644 apps/docs/content/fr/blog/next-13-4.mdx create mode 100644 apps/docs/content/fr/blog/next-13-5.mdx create mode 100644 apps/docs/content/fr/blog/next-13.mdx create mode 100644 apps/docs/content/fr/blog/next-14-1.mdx create mode 100644 apps/docs/content/fr/blog/next-14-2.mdx create mode 100644 apps/docs/content/fr/blog/next-14.mdx create mode 100644 apps/docs/content/fr/blog/next-15-1.mdx create mode 100644 apps/docs/content/fr/blog/next-15-2.mdx create mode 100644 apps/docs/content/fr/blog/next-15-3.mdx create mode 100644 apps/docs/content/fr/blog/next-15-rc.mdx create mode 100644 apps/docs/content/fr/blog/next-15-rc2.mdx create mode 100644 apps/docs/content/fr/blog/next-15.mdx create mode 100644 apps/docs/content/fr/blog/next-5-1.mdx create mode 100644 apps/docs/content/fr/blog/next-5.mdx create mode 100644 apps/docs/content/fr/blog/next-6-1.mdx create mode 100644 apps/docs/content/fr/blog/next-6.mdx create mode 100644 apps/docs/content/fr/blog/next-7.mdx create mode 100644 apps/docs/content/fr/blog/next-8-0-4.mdx create mode 100644 apps/docs/content/fr/blog/next-8-1.mdx create mode 100644 apps/docs/content/fr/blog/next-8.mdx create mode 100644 apps/docs/content/fr/blog/next-9-0-7.mdx create mode 100644 apps/docs/content/fr/blog/next-9-1-7.mdx create mode 100644 apps/docs/content/fr/blog/next-9-1.mdx create mode 100644 apps/docs/content/fr/blog/next-9-2.mdx create mode 100644 apps/docs/content/fr/blog/next-9-3.mdx create mode 100644 apps/docs/content/fr/blog/next-9-4.mdx create mode 100644 apps/docs/content/fr/blog/next-9-5.mdx create mode 100644 apps/docs/content/fr/blog/next-9.mdx create mode 100644 apps/docs/content/fr/blog/our-journey-with-caching.mdx create mode 100644 apps/docs/content/fr/blog/security-nextjs-server-components-actions.mdx create mode 100644 apps/docs/content/fr/blog/styling-next-with-styled-jsx.mdx create mode 100644 apps/docs/content/fr/blog/turbopack-for-development-stable.mdx create mode 100644 apps/docs/content/fr/blog/webpack-memory.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/01-what-is-react-and-nextjs.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/02-rendering-ui.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/03-updating-ui-with-javascript.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/04-getting-started-with-react.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/05-building-ui-with-components.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/06-displaying-data-with-props.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/07-updating-state.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/08-from-react-to-nextjs.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/09-installation.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/10-server-and-client-components.mdx create mode 100644 apps/docs/content/fr/learn/01-react-foundations/index.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/01-getting-started.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/02-css-styling.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/03-optimizing-fonts-images.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/04-creating-layouts-and-pages.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/05-navigating-between-pages.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/06-setting-up-your-database.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/07-fetching-data.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/08-static-and-dynamic-rendering.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/09-streaming.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/10-partial-prerendering.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/11-adding-search-and-pagination.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/12-mutating-data.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/13-error-handling.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/14-improving-accessibility.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/15-adding-authentication.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/16-adding-metadata.mdx create mode 100644 apps/docs/content/fr/learn/02-dashboard-app/index.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/01-create-nextjs-app-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/02-create-nextjs-app-welcome-to-nextjs.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/03-create-nextjs-app-editing-the-page.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/04-navigate-between-pages.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/05-navigate-between-pages-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/06-navigate-between-pages-pages-in-nextjs.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/07-navigate-between-pages-link-component.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/08-navigate-between-pages-client-side.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/09-assets-metadata-css-layout-component.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/10-assets-metadata-css.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/11-assets-metadata-css-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/12-assets-metadata-css-assets.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/13-assets-metadata-css-metadata.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/14-assets-metadata-css-third-party-javascript.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/15-assets-metadata-css-css-styling.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/16-assets-metadata-css-global-styles.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/17-assets-metadata-css-polishing-layout.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/18-assets-metadata-css-styling-tips.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/19-data-fetching-blog-data.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/20-data-fetching.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/21-data-fetching-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/22-data-fetching-pre-rendering.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/23-data-fetching-two-forms.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/24-data-fetching-with-data.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/25-data-fetching-implement-getstaticprops.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/26-data-fetching-getstaticprops-details.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/27-data-fetching-request-time.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/28-dynamic-routes.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/29-dynamic-routes-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/30-dynamic-routes-page-path-external-data.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/31-dynamic-routes-implement-getstaticpaths.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/32-dynamic-routes-implement-getstaticprops.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/33-dynamic-routes-render-markdown.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/34-dynamic-routes-polishing-post-page.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/35-dynamic-routes-polishing-index-page.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/36-dynamic-routes-dynamic-routes-details.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/37-api-routes.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/38-api-routes-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/39-api-routes-creating-api-routes.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/40-api-routes-api-routes-details.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/41-deploying-nextjs-app.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/42-deploying-nextjs-app-setup.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/43-deploying-nextjs-app-github.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/44-deploying-nextjs-app-deploy.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/45-deploying-nextjs-app-platform-details.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/46-deploying-nextjs-app-other-hosting-options.mdx create mode 100644 apps/docs/content/fr/learn/03-pages-router/index.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/01-importance-of-seo.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/02-search-systems.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/03-webcrawlers.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/04-crawling-and-indexing.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/05-status-codes.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/06-robots-txt.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/07-xml-sitemaps.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/08-metatags.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/09-canonical.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/10-rendering-and-ranking.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/11-rendering-strategies.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/12-amp.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/13-url-structure.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/14-metadata.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/15-on-page-seo.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/16-web-performance.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/17-vitals-overview.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/18-lcp.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/19-fid.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/20-cls.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/21-seo-impact.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/22-improve.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/23-lighthouse.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/24-images.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/25-dynamic-imports.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/26-dynamic-import-components.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/27-fonts.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/28-third-party-scripts.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/29-monitor.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/30-nextjs-speed-insights.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/31-custom-reporting.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/32-other-tools.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/33-data-studio.mdx create mode 100644 apps/docs/content/fr/learn/04-seo/index.mdx diff --git a/apps/docs/content/fr/blog/building-apis-with-nextjs.mdx b/apps/docs/content/fr/blog/building-apis-with-nextjs.mdx new file mode 100644 index 00000000..ecfeea34 --- /dev/null +++ b/apps/docs/content/fr/blog/building-apis-with-nextjs.mdx @@ -0,0 +1,396 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:42:55.409Z +title: Construire des API avec Next.js +description: Apprenez à construire des API avec Next.js. +author: + - name: Lee Robinson + image: /static/team/lee.jpg +date: 2025-02-28T14:00:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/building-apis-with-nextjs/twitter-card.png +--- + +Ce guide couvrira comment construire des API avec Next.js, incluant la configuration de votre projet, la compréhension du routeur d'application (App Router) et des gestionnaires de route (Route Handlers), la gestion de multiples méthodes HTTP, l'implémentation de routage dynamique, la création de logique middleware réutilisable, et la décision de quand créer une couche API dédiée. + +* [1\. Premiers pas](#1-premiers-pas) + * [1.1 Créer une application Next.js](#11-créer-une-application-nextjs) + * [1.2 App Router vs. Pages Router](#12-app-router-vs-pages-router) +* [2\. Pourquoi (et quand) construire des API avec Next.js](#2-pourquoi-et-quand-construire-des-api-avec-nextjs) +* [3\. Créer une API avec les Route Handlers](#3-créer-une-api-avec-les-route-handlers) + * [3.1 Configuration de base des fichiers](#31-configuration-de-base-des-fichiers) + * [3.2 Méthodes HTTP multiples dans un seul fichier](#32-méthodes-http-multiples-dans-un-seul-fichier) +* [4\. Travailler avec les API Web](#4-travailler-avec-les-api-web) + * [4.1 Utilisation directe de Request & Response](#41-utilisation-directe-de-request--response) + * [4.2 Paramètres de requête](#42-paramètres-de-requête) + * [4.3 En-têtes et cookies](#43-en-têtes-et-cookies) +* [5\. Routes dynamiques](#5-routes-dynamiques) +* [6\. Utiliser Next.js comme proxy ou couche de transfert](#6-utiliser-nextjs-comme-proxy-ou-couche-de-transfert) +* [7\. Construire une logique "middleware" partagée](#7-construire-une-logique-middleware-partagée) +* [8\. Déploiement et considérations sur le "Mode SPA"](#8-déploiement-et-considérations-sur-le-mode-spa) + * [8.1 Déploiement Node.js standard](#81-déploiement-nodejs-standard) + * [8.2 Export statique/SPA](#82-export-statiquespa) + * [8.3 Déployer des API sur Vercel](#83-déployer-des-api-sur-vercel) +* [9\. Quand éviter de créer un point de terminaison API](#9-quand-éviter-de-créer-un-point-de-terminaison-api) +* [10\. Mettre tout ensemble](#10-mettre-tout-ensemble) +* [Conclusion](#conclusion) +* [Foire aux questions](#foire-aux-questions) + * [Qu'en est-il des Server Actions ?](#quen-est-il-des-server-actions) + * [Puis-je utiliser TypeScript avec les Route Handlers ?](#puis-je-utiliser-typescript-avec-les-route-handlers) + * [Quelles sont les meilleures pratiques pour l'authentification ?](#quelles-sont-les-meilleures-pratiques-pour-lauthentification) + +[1\. Premiers pas](#1-premiers-pas) +----------------------------------------- + +### [1.1 Créer une application Next.js](#11-créer-une-application-nextjs) + +Si vous partez de zéro, vous pouvez créer un nouveau projet Next.js en utilisant : + +```bash filename="Terminal" +npx create-next-app@latest --api +``` + +> **Note :** Le flag `--api` inclut automatiquement un exemple de `route.ts` dans le dossier `app/` de votre nouveau projet, démontrant comment créer un point de terminaison API. + +### [1.2 App Router vs. Pages Router](#12-app-router-vs-pages-router) + +* **Pages Router** : Historiquement, Next.js utilisait `pages/api/*` pour les API. Cette approche s'appuyait sur les objets requête/réponse de Node.js et une API de type Express. +* **App Router (Par défaut)** : Introduit dans Next.js 13, l'App Router adopte pleinement les API Web standard Request/Response. Au lieu de `pages/api/*`, vous pouvez maintenant placer des fichiers `route.ts` ou `route.js` n'importe où dans le répertoire `app/`. + +> **Pourquoi changer ?** Les "Route Handlers" de l'App Router s'appuient sur les [API Web Platform Request/Response](https://developer.mozilla.org/en-US/docs/Web/API) plutôt que sur des API spécifiques à Node.js. Cela simplifie l'apprentissage, réduit les frictions et vous aide à réutiliser vos connaissances à travers différents outils. + +[2\. Pourquoi (et quand) construire des API avec Next.js](#2-pourquoi-et-quand-construire-des-api-avec-nextjs) +------------------------------------------------------------------------------------------ + +1. **API publique pour plusieurs clients** + + * Vous pouvez construire une API publique consommée par votre application web Next.js, une application mobile séparée, ou tout service tiers. Par exemple, vous pourriez récupérer des données depuis `/api/users` à la fois dans votre site React et une application mobile React Native. +2. **Proxy vers un backend existant** + + * Parfois, vous souhaitez masquer ou consolider des [microservices](https://vercel.com/blog/how-vercel-adopted-microfrontends) externes derrière un seul point de terminaison. Les Route Handlers de Next.js peuvent agir comme un proxy ou une couche intermédiaire vers un backend existant. Par exemple, vous pourriez intercepter des requêtes, gérer l'authentification, transformer des données, puis transmettre la requête à une API en amont. +3. **Webhooks et intégrations** + + * Si vous recevez des rappels externes ou des webhooks (par exemple depuis Stripe, GitHub, Twilio), vous pouvez les gérer avec les Route Handlers. +4. **Authentification personnalisée** + + * Si vous avez besoin de sessions, de tokens ou d'autres logiques d'authentification, vous pouvez stocker des cookies, lire des en-têtes et répondre avec les données appropriées dans votre couche API Next.js. + +> **Note :** Si vous avez seulement besoin de récupération de données côté serveur pour votre propre application Next.js (et que vous n'avez pas besoin de partager ces données à l'extérieur), les Server Components pourraient suffire à récupérer les données directement pendant le rendu—aucune couche API séparée n'est nécessaire. + +[3\. Créer une API avec les Route Handlers](#3-créer-une-api-avec-les-route-handlers) +--------------------------------------------------------------------------------- + +### [3.1 Configuration de base des fichiers](#31-configuration-de-base-des-fichiers) + +Dans l'App Router (`app/`), créez un dossier qui représente votre route, et à l'intérieur, un fichier `route.ts`. + +Par exemple, pour créer un point de terminaison à `/api/users` : + +``` +app +└── api + └── users + └── route.ts +``` + +### [3.2 Méthodes HTTP multiples dans un seul fichier](#32-méthodes-http-multiples-dans-un-seul-fichier) + +Contrairement aux routes API du Pages Router (qui avaient une seule exportation par défaut), vous pouvez exporter plusieurs fonctions représentant différentes méthodes HTTP depuis le même fichier. + +```ts filename="app/api/users/route.ts" +export async function GET(request: Request) { + // Par exemple, récupérez des données depuis votre base de données ici + const users = [ + { id: 1, name: 'Alice' }, + { id: 2, name: 'Bob' } + ]; + return new Response(JSON.stringify(users), { + status: 200, + headers: { 'Content-Type': 'application/json' } + }); +} + +export async function POST(request: Request) { + // Analysez le corps de la requête + const body = await request.json(); + const { name } = body; + + // Par exemple, insérez un nouvel utilisateur dans votre base de données + const newUser = { id: Date.now(), name }; + + return new Response(JSON.stringify(newUser), { + status: 201, + headers: { 'Content-Type': 'application/json' } + }); +} +``` + +Maintenant, envoyer une requête GET à `/api/users` retourne votre liste d'utilisateurs, tandis qu'une requête `POST` à la même URL en insérera un nouveau. + +[4\. Travailler avec les API Web](#4-travailler-avec-les-api-web) +----------------------------------------------------- + +### [4.1 Utilisation directe de Request & Response](#41-utilisation-directe-de-request--response) + +Par défaut, vos méthodes Route Handler (`GET`, `POST`, etc.) reçoivent un objet [Request](https://developer.mozilla.org/docs/Web/API/Request) standard, et vous devez retourner un objet [Response](https://developer.mozilla.org/docs/Web/API/Response) standard. + +### [4.2 Paramètres de requête](#42-paramètres-de-requête) + +```ts filename="app/api/search/route.ts" +import { NextRequest } from 'next/server'; + +export function GET(request: NextRequest) { + const searchParams = request.nextUrl.searchParams; + const query = searchParams.get('query'); // Par exemple, `/api/search?query=hello` + + return new Response( + JSON.stringify({ result: `Vous avez recherché : ${query}` }), + { + headers: { 'Content-Type': 'application/json' }, + }, + ); +} +``` + +### [4.3 En-têtes et cookies](#43-en-têtes-et-cookies) + +```ts filename="app/api/auth/route.ts" +import { NextRequest } from 'next/server'; +import { cookies, headers } from 'next/headers'; + +export async function GET(request: NextRequest) { + // 1. Utilisation des helpers 'next/headers' + const cookieStore = await cookies(); + const token = cookieStore.get('token'); + + const headersList = await headers(); + const referer = headersList.get('referer'); + + // 2. Utilisation des API Web standard + const userAgent = request.headers.get('user-agent'); + + return new Response(JSON.stringify({ token, referer, userAgent }), { + headers: { 'Content-Type': 'application/json' }, + }); +} +``` + +Les fonctions `cookies()` et `headers()` peuvent être utiles si vous prévoyez de réutiliser une logique partagée dans d'autres codes côté serveur dans Next.js. Vous remarquerez que Next.js fournit également `NextRequest` et `NextResponse` qui étendent les API Web de base. + +[5\. Routes dynamiques](#5-routes-dynamiques) +--------------------------------------- + +Pour créer des chemins dynamiques (par exemple `/api/users/:id`), utilisez des **segments dynamiques** dans votre structure de dossier : + +``` +app +└── api + └── users + └── [id] + └── route.ts +``` + +Ce fichier correspond à une URL comme `/api/users/123`, avec le `123` capturé comme paramètre. + +```ts filename="app/api/users/[id]/route.ts" +import { NextRequest } from 'next/server'; + +export async function GET( + request: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) { + const id = (await params).id; + // Par exemple, interrogez une base de données pour l'utilisateur avec l'ID `id` + return new Response(JSON.stringify({ id, name: `Utilisateur ${id}` }), { + status: 200, + headers: { 'Content-Type': 'application/json' }, + }); +} + +export async function DELETE( + request: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) { + const id = (await params).id; + // Par exemple, supprimez l'utilisateur avec l'ID `id` dans la base de données + return new Response(null, { status: 204 }); +} +``` + +Ici, `params.id` vous donne le segment dynamique. + +[6\. Utiliser Next.js comme proxy ou couche de transfert](#6-utiliser-nextjs-comme-proxy-ou-couche-de-transfert) +-------------------------------------------------------------------------------------------------- + +Un scénario courant est le **proxying** d'un service backend existant. Vous pouvez authentifier les requêtes, gérer les logs, ou transformer les données avant de les envoyer à un serveur distant ou backend : + +```ts filename="app/api/external/route.ts" +import { NextRequest } from 'next/server'; + +export async function GET(request: NextRequest) { + const response = await fetch('https://example.com/api/data', { + // Optionnel : transférez certains en-têtes, ajoutez des tokens d'authentification, etc. + headers: { Authorization: `Bearer ${process.env.API_TOKEN}` }, + }); + + // Transformez ou transférez la réponse + const data = await response.json(); + const transformed = { ...data, source: 'proxifié-via-nextjs' }; + + return new Response(JSON.stringify(transformed), { + headers: { 'Content-Type': 'application/json' }, + }); +} +``` + +Maintenant, vos clients n'ont qu'à appeler `/api/external`, et Next.js gérera le reste. Ceci est aussi parfois appelé un "Backend for Frontend" ou BFF. + +[7\. Construire une logique "middleware" partagée](#7-construire-une-logique-middleware-partagée) +----------------------------------------------------------------------------- + +Si vous souhaitez appliquer la même logique (par exemple des vérifications d'authentification, des logs) à travers plusieurs Route Handlers, vous pouvez créer des fonctions réutilisables qui englobent vos gestionnaires : + +```ts filename="lib/with-auth.ts" +import { NextRequest } from 'next/server'; + +type Handler = (req: NextRequest, context?: any) => Promise; + +export function withAuth(handler: Handler): Handler { + return async (req, context) => { + const token = req.cookies.get('token')?.value; + if (!token) { + return new Response(JSON.stringify({ error: 'Non autorisé' }), { + status: 401, + headers: { 'Content-Type': 'application/json' }, + }); + } + + // Si authentifié, appelez le gestionnaire original + return handler(req, context); + }; +} +``` + +Puis dans votre Route Handler : + +```ts filename="app/api/secret/route.ts" +import { NextRequest } from 'next/server'; +import { withAuth } from '@/lib/with-auth'; + +async function secretGET(request: NextRequest) { + return new Response(JSON.stringify({ secret: 'Ici se trouvent des dragons' }), { + headers: { 'Content-Type': 'application/json' }, + }); +} + +export const GET = withAuth(secretGET); +``` + +[8\. Déploiement et considérations sur le "Mode SPA"](#8-déploiement-et-considérations-sur-le-mode-spa) +----------------------------------------------------------------------------------------- + +### [8.1 Déploiement Node.js standard](#81-déploiement-nodejs-standard) + +Le déploiement standard du serveur Next.js utilisant `next start` vous permet d'utiliser des fonctionnalités comme les Route Handlers, les Server Components, le Middleware et plus—tout en profitant des informations dynamiques au moment de la requête. + +Aucune configuration supplémentaire n'est requise. Voir [Déploiement](/docs/app/building-your-application/deploying) pour plus de détails. + +### [8.2 Export statique/SPA](#82-export-statiquespa) + +Next.js supporte également la génération de votre site entier comme une [Single-Page Application (SPA) statique](/docs/app/building-your-application/upgrading/single-page-applications). + +Vous pouvez activer ceci en configurant : + +```ts filename="next.config.ts" +import type { NextConfig } from 'next'; + +const nextConfig: NextConfig = { + output: 'export', +}; + +export default nextConfig; +``` + +En **mode export statique**, Next.js générera du HTML, CSS et JS purement statiques. **Vous ne pouvez pas exécuter de code côté serveur** (comme des points de terminaison API). Si vous avez toujours besoin d'une API, vous devrez l'héberger séparément (par exemple, un serveur Node.js autonome). + +> **Note :** +> +> * **Les Route Handlers GET** [peuvent être exportés statiquement](/docs/app/building-your-application/deploying/static-exports#route-handlers) s'ils ne dépendent pas de données de requête dynamiques. Ils deviennent des fichiers statiques dans votre dossier `out`. +> * **Toutes les autres fonctionnalités serveur** (requêtes dynamiques, réécriture de cookies, etc.) ne sont **pas** supportées dans un export SPA pur. + +### [8.3 Déploiement d'APIs sur Vercel](#83-deploying-apis-on-vercel) + +Si vous déployez votre application Next.js sur Vercel, nous avons un [guide sur le déploiement d'APIs](https://vercel.com/guides/hosting-backend-apis). Cela inclut d'autres fonctionnalités de Vercel comme la [limitation de débit programmatique](https://vercel.com/docs/security/vercel-waf/rate-limiting-sdk) via le Vercel Firewall. Vercel propose également des [Cron Jobs](https://vercel.com/docs/cron-jobs/manage-cron-jobs), souvent nécessaires avec les approches API. + +[9\. Quand éviter de créer un point de terminaison API](#9-when-to-skip-creating-an-api-endpoint) +------------------------------------------------------------------------------------- + +Avec les **Composants Serveur React** du Routeur d'application, vous pouvez récupérer des données directement sur le serveur sans exposer de point de terminaison public : + +```tsx filename="app/users/page.tsx" +// (Composant Serveur) +export default async function UsersPage() { + // Cette requête s'exécute sur le serveur (aucun code côté client nécessaire ici) + const res = await fetch('https://api.example.com/users'); + const data = await res.json(); + + return ( +
+

Utilisateurs

+
    + {data.map((user: any) => ( +
  • {user.name}
    • + ))} +
+
+ ); +} +``` + +Si vos données ne sont utilisées que dans votre application Next.js, vous n'avez peut-être pas besoin d'une API publique du tout. + +[10\. Tout mettre ensemble](#10-putting-it-all-together) +----------------------------------------------------------- + +1. **Créez un nouveau projet Next.js** : `npx create-next-app@latest --api`. +2. **Ajoutez des gestionnaires de route** dans le répertoire `app/` (par exemple, `app/api/users/route.ts`). +3. **Exportez les méthodes HTTP** (`GET`, `POST`, `PUT`, `DELETE`, etc.) dans le même fichier. +4. **Utilisez les APIs Web standard** pour interagir avec l'objet `Request` et renvoyer une `Response`. +5. **Construisez une API publique** si vous avez besoin que d'autres clients consomment vos données, ou pour proxyfier un service backend. +6. **Récupérez** vos nouvelles routes API depuis le client (par exemple, dans un Composant Client ou avec `fetch('/api/...')`). +7. Ou **évitez complètement de créer une API** si un Composant Serveur peut simplement récupérer les données. +8. **Ajoutez un "middleware" partagé** (par exemple, `withAuth()`) pour l'authentification ou d'autres logiques répétées. +9. **Déployez** dans un environnement compatible Node.js pour les fonctionnalités serveur, ou **exportez** statiquement si vous n'avez besoin que d'une SPA statique. + +[Conclusion](#conclusion) +------------------------- + +L'utilisation du **Routeur d'application** et des **Gestionnaires de route** de Next.js vous offre une manière flexible et moderne de construire des APIs qui exploitent directement la **Plateforme Web**. Vous pouvez : + +* **Créer une API publique complète** à partager avec des clients web, mobiles ou tiers. +* **Proxyfier** et personnaliser les appels vers des services externes existants. +* **Implémenter** une couche "middleware" réutilisable pour l'authentification, la journalisation ou toute logique répétée. +* **Router dynamiquement** les requêtes en utilisant la structure de dossiers avec segment `[id]`. + +[Questions fréquemment posées](#frequently-asked-questions) +--------------------------------------------------------- + +### [Qu'en est-il des Actions Serveur ?](#what-about-server-actions) + +Vous pouvez considérer les [Actions Serveur](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) comme des routes API `POST` générées automatiquement qui peuvent être appelées depuis le client. + +Elles sont conçues pour les opérations de mutation, comme la création, la mise à jour ou la suppression de données. Vous appelez une Action Serveur comme une fonction JavaScript normale, plutôt que de faire un `fetch` explicite vers une route API définie. + +Bien qu'il y ait toujours une requête réseau en cours, vous n'avez pas besoin de la gérer explicitement. Le chemin URL est généré automatiquement et [chiffré](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#security), donc vous ne pouvez pas accéder manuellement à une route comme `/api/users` dans le navigateur. + +Si vous prévoyez d'utiliser des Actions Serveur _et_ d'exposer une API publique, nous recommandons de déplacer la logique principale vers une [Couche d'Accès aux Données](/blog/security-nextjs-server-components-actions) et d'appeler la même logique depuis l'Action Serveur et la route API. + +### [Puis-je utiliser TypeScript avec les Gestionnaires de route ?](#can-i-use-typescript-with-route-handlers) + +Oui, vous pouvez utiliser TypeScript avec les Gestionnaires de route. Par exemple, en définissant les types `Request` et `Response` dans votre fichier `route`. + +Apprenez-en plus sur [TypeScript avec Next.js](/docs/app/api-reference/config/typescript). + +### [Quelles sont les meilleures pratiques pour l'authentification ?](#what-are-the-best-practices-for-authentication) + +Apprenez-en plus dans notre [documentation sur l'authentification](/docs/app/building-your-application/authentication). diff --git a/apps/docs/content/fr/blog/composable-caching.mdx b/apps/docs/content/fr/blog/composable-caching.mdx new file mode 100644 index 00000000..8eeffda7 --- /dev/null +++ b/apps/docs/content/fr/blog/composable-caching.mdx @@ -0,0 +1,202 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:40:59.661Z +title: Cache modulaire avec Next.js +description: Découvrez la conception de l'API et les avantages de la directive 'use cache' +author: + - name: Lee Robinson + image: /static/team/lee.jpg +date: 2025-01-03T14:00:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/composable-caching/twitter-card.png +--- + +Nous travaillons sur un modèle de mise en cache simple et puissant pour Next.js. Dans un précédent article, nous avons parlé de [notre parcours avec le cache](/blog/our-journey-with-caching) et comment nous en sommes arrivés à la directive `'use cache'`. + +Cet article abordera la conception de l'API et les avantages de `'use cache'`. + +[Qu'est-ce que `'use cache'` ?](#what-is-use-cache) +-------------------------------------------------- + +`'use cache'` rend votre application plus rapide en mettant en cache les données ou composants selon les besoins. + +C'est une "directive" JavaScript - un littéral de chaîne que vous ajoutez dans votre code - qui signale au compilateur Next.js d'entrer dans une "limite" différente. Par exemple, passer du serveur au client. + +C'est une idée similaire aux directives React comme `'use client'` et `'use server'`. Les directives sont des instructions du compilateur qui définissent où le code doit s'exécuter, permettant au framework d'optimiser et d'orchestrer les éléments individuels pour vous. + +[Comment ça marche ?](#how-does-it-work) +---------------------------------------- + +Commençons par un exemple simple : + +``` +async function getUser(id) { + 'use cache'; + let res = await fetch(`https://api.vercel.app/user/${id}`); + return res.json(); +} +``` + +En arrière-plan, Next.js transforme ce code en une fonction serveur grâce à la directive `'use cache'`. Pendant la compilation, les "dépendances" de cette entrée de cache sont identifiées et utilisées comme partie de la clé de cache. + +Par exemple, `id` devient partie de la clé de cache. Si nous appelons `getUser(1)` plusieurs fois, nous retournons la sortie mémoïsée de la fonction serveur mise en cache. Changer cette valeur créera une nouvelle entrée dans le cache. + +Regardons un exemple utilisant la fonction mise en cache dans un composant serveur avec une [fermeture (closure)](https://v0.dev/chat/5kD47RIecQK?b=b_rCP4CvfbFFW). + +``` +function Profile({ id }) { + async function getNotifications(index, limit) { + 'use cache'; + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + .where(eq(notifications.userId, id)); + } + + return ; +} +``` + +Cet exemple est plus complexe. Pouvez-vous repérer toutes les dépendances qui doivent faire partie de la clé de cache ? + +Les arguments `index` et `limit` sont logiques - si ces valeurs changent, nous sélectionnons une tranche différente des notifications. Mais qu'en est-il de l'`id` utilisateur ? Sa valeur provient du composant parent. + +Le compilateur peut comprendre que `getNotifications` dépend aussi de `id`, et sa valeur est automatiquement incluse dans la clé de cache. Cela évite toute une catégorie de problèmes de cache dus à des dépendances incorrectes ou manquantes dans la clé de cache. + +[Pourquoi ne pas utiliser une fonction cache ?](#why-not-use-a-cache-function) +---------------------------------------------------------------------------- + +Revisitons le dernier exemple. Pourrions-nous plutôt utiliser une fonction `cache()` au lieu d'une directive ? + +``` +function Profile({ id }) { + async function getNotifications(index, limit) { + return await cache(async () => { + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + // Oups ! Où incluons-nous id dans la clé de cache ? + .where(eq(notifications.userId, id)); + }); + } + + return ; +} +``` + +Une fonction `cache()` ne pourrait pas examiner la fermeture et voir que la valeur `id` devrait faire partie de la clé de cache. Vous devriez spécifier manuellement que `id` fait partie de votre clé. Si vous oubliez de le faire, ou le faites incorrectement, vous risquez des collisions de cache ou des données obsolètes. + +Les fermetures peuvent capturer toutes sortes de variables locales. Une approche naïve pourrait accidentellement inclure (ou omettre) des variables que vous ne souhaitiez pas. Cela pourrait conduire à mettre en cache les mauvaises données, ou risquer un empoisonnement du cache si des informations sensibles fuient dans la clé de cache. + +`'use cache'` donne au compilateur suffisamment de contexte pour gérer les fermetures en toute sécurité et produire des clés de cache correctement. Une solution uniquement runtime, comme `cache()`, vous obligerait à tout faire manuellement - et il est facile de faire des erreurs. En revanche, une directive peut être analysée statiquement pour gérer de manière fiable toutes vos dépendances sous le capot. + +[Comment les valeurs d'entrée non sérialisables sont-elles gérées ?](#how-are-non-serialized-input-values-handled) +------------------------------------------------------------------------------------------------------------------ + +Nous avons deux types différents de valeurs d'entrée à mettre en cache : + +* **Sérialisables** : Ici, "sérialisable" signifie qu'une entrée peut être convertie en un format stable basé sur des chaînes _sans_ perdre de sens. Bien que beaucoup pensent d'abord à `JSON.stringify`, nous utilisons en fait la sérialisation de React (par exemple via les composants serveur) pour gérer une gamme plus large d'entrées - incluant les promesses, les structures de données circulaires et d'autres objets complexes. Cela va au-delà de ce que le JSON brut peut faire. +* **Non sérialisables** : Ces entrées ne font pas partie de la clé de cache. Lorsque nous tentons de mettre ces valeurs en cache, nous retournons une "référence" serveur. Cette référence est ensuite utilisée par Next.js pour restaurer la valeur originale au runtime. + +Supposons que nous ayons pensé à inclure `id` dans la clé de cache : + +``` +await cache(async () => { + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + .where(eq(notifications.userId, id)); +}, [id, index, limit]); +``` + +Cela fonctionne si les valeurs d'entrée peuvent être sérialisées. Mais si `id` était un élément React ou une valeur plus complexe, nous devrions sérialiser manuellement les clés d'entrée. Considérons un composant serveur qui récupère l'utilisateur courant basé sur une prop `id` : + +``` +async function Profile({ id, children }) { + 'use cache'; + const user = await getUser(id); + + return ( + <> +

{user.name}

+ {/* Changer children ne casse pas le cache... pourquoi ? */} + {children} + + ); +} +``` + +Détaillons comment cela fonctionne : + +1. Pendant la compilation, Next.js voit la directive `'use cache'` et transforme le code pour créer une fonction serveur spéciale qui prend en charge le cache. Aucune mise en cache ne se produit pendant la compilation, mais plutôt Next.js met en place le mécanisme nécessaire pour la mise en cache au runtime. +2. Lorsque votre code appelle la "fonction cache", Next.js sérialise les arguments de la fonction. Tout ce qui n'est pas directement sérialisable, comme le JSX, est remplacé par un placeholder de "référence". +3. Next.js vérifie si un résultat mis en cache existe pour les arguments sérialisés donnés. Si aucun résultat n'est trouvé, la fonction calcule la nouvelle valeur à mettre en cache. +4. Après que la fonction a terminé, la valeur de retour est sérialisée. Les parties non sérialisables de la valeur de retour sont reconverties en références. +5. Le code qui a appelé la fonction cache désérialise la sortie et évalue les références. Cela permet à Next.js d'échanger les références avec leurs objets ou valeurs réels, ce qui signifie que des entrées non sérialisables comme `children` peuvent conserver leurs valeurs originales, non mises en cache. + +Cela signifie que nous pouvons mettre en cache en toute sécurité _seulement_ le composant `` et pas les enfants. Lors des rendus suivants, `getUser()` n'est pas rappelé. La valeur de `children` pourrait être dynamique ou un élément mis en cache séparément avec une durée de cache différente. C'est le cache modulaire. + +[Cela semble familier...](#this-seems-familiar) +----------------------------------------------- + +Si vous pensez "ça ressemble au même modèle de composition serveur et client" - vous avez tout à fait raison. C'est parfois appelé le motif "donut" : + +* La partie **extérieure** du donut est un composant serveur qui gère la récupération de données ou une logique lourde. +* Le **trou** au milieu est un composant enfant qui pourrait avoir de l'interactivité + +```tsx filename="app/page.tsx" +export default function Page() { + return ( + + {/* Crée un trou vers le client */} + + + ); +} +``` + +`'use cache'` est la même chose. Le donut est la valeur mise en cache du composant extérieur et le trou est les références qui sont remplies au runtime. C'est pourquoi changer `children` n'invalide pas toute la sortie mise en cache. Les enfants sont juste des références qui sont remplies plus tard. + +[Qu'en est-il du tagging et de l'invalidation ?](#what-about-tagging-and-invalidation) +------------------------------------------------------------------------------------- + +Vous pouvez définir la durée de vie du cache avec différents [profils](/docs/app/api-reference/functions/cacheLife). Nous incluons un ensemble de profils par défaut, mais vous pouvez définir vos propres valeurs personnalisées si vous le souhaitez. + +``` +async function getUser(id) { + 'use cache'; + cacheLife('hours'); + let res = await fetch(`https://api.vercel.app/user/${id}`); + return res.json(); +} +``` + +Pour invalider une entrée de cache spécifique, vous pouvez [tagger le cache](/docs/app/api-reference/functions/cacheTag) puis appeler `revalidateTag()`. Un modèle puissant est que vous pouvez tagger le cache _après_ avoir récupéré vos données (par exemple depuis un CMS) : + +``` +async function getPost(postId) { + 'use cache'; + let res = await fetch(`https://api.vercel.app/blog/${postId}`); + let data = await res.json(); + cacheTag(postId, data.authorId); + return data; +} +``` + +[Simple et puissant](#simple-and-powerful) +----------------------------------------- + +Notre objectif avec `'use cache'` est de rendre la création de logique de cache simple _et_ puissante. + +* **Simple** : Vous pouvez créer des entrées de cache avec un raisonnement local. Vous n'avez pas besoin de vous soucier des effets de bord globaux, comme des entrées de clé de cache oubliées ou des modifications involontaires d'autres parties de votre codebase. +* **Puissant** : Vous pouvez mettre en cache plus que du code statiquement analysable. Par exemple, des valeurs qui pourraient changer au runtime, mais dont vous voulez quand même mettre en cache le résultat après évaluation. + +`'use cache` est encore **expérimental** dans Next.js. Nous adorerions avoir vos retours précoces pendant que vous le testez. + +[En savoir plus dans la documentation](/docs/app/api-reference/directives/use-cache). \ No newline at end of file diff --git a/apps/docs/content/fr/blog/create-next-app.mdx b/apps/docs/content/fr/blog/create-next-app.mdx new file mode 100644 index 00000000..183d0b75 --- /dev/null +++ b/apps/docs/content/fr/blog/create-next-app.mdx @@ -0,0 +1,39 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:39:29.827Z +title: Présentation de Create Next App +description: >- + Nous sommes ravis de vous présenter aujourd'hui le nouveau Create Next App. Create Next + App configure une application React moderne alimentée par Next.js en une seule commande. +author: + - name: Joe Haddad + image: /static/team/timer.jpg + - name: Tim Neutkens + image: /static/team/tim.jpg +date: 2019-10-09T15:02:30.543Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/create-next-app/twitter-card.png +--- + +Nous sommes ravis de vous présenter aujourd'hui le nouveau Create Next App. + +Create Next App configure une application React moderne alimentée par Next.js en une seule commande. + +Pour commencer, il vous suffit d'exécuter : + +```bash filename="Terminal" +npx create-next-app +``` + +Create Next App a été entièrement repensé pour offrir la meilleure expérience développeur possible : + +* **Expérience interactive** : L'exécution de `npx create-next-app` (sans arguments) lance désormais une expérience interactive qui vous guide dans la configuration d'un projet. +* **Zéro dépendance** : L'initialisation d'un projet est maintenant aussi rapide que **une seconde**. Create Next App n'a aucune dépendance et s'installe en **seulement 604 kB**. Avant nos optimisations, la version précédente pesait **5,38 MB**. Cela représente une réduction de plus de **4,7 MB** ! +* **Support hors ligne** : Create Next App détectera automatiquement si vous êtes hors ligne et initialisera votre projet en utilisant votre cache de paquets local. +* **Nouveau modèle de projet par défaut** : Create Next App utilise un nouveau modèle de projet conçu pour une application Next.js moderne. Comme Create Next App est maintenant maintenu parallèlement à Next.js lui-même, ce modèle sera toujours à jour avec la dernière version de Next.js ! +* **Support des exemples** : Create Next App peut initialiser votre application en utilisant un exemple de la [collection d'exemples Next.js](https://github.com/vercel/next.js/tree/canary/examples) (par exemple `npx create-next-app --example api-routes`). +* **Testé** : Le package fait partie du monorepo Next.js et est testé avec la même suite de tests d'intégration que Next.js lui-même, garantissant qu'il fonctionne comme prévu à chaque version. + +Create Next App était auparavant un projet [maintenu par la communauté](https://open.segment.com/create-next-app/), mais nous avons estimé qu'il était important de soigner la première impression de Next.js. Surtout que nous le recommandons dans la [collection d'exemples Next.js](https://github.com/vercel/next.js/tree/canary/examples). + +Nous avons travaillé avec [Segment](https://segment.com/) pour transférer la propriété du package, et nous sommes très reconnaissants pour leur gestion précédente, notamment par [Fouad Matin](https://twitter.com/fouadmatin). \ No newline at end of file diff --git a/apps/docs/content/fr/blog/incremental-adoption.mdx b/apps/docs/content/fr/blog/incremental-adoption.mdx new file mode 100644 index 00000000..d70e8e3e --- /dev/null +++ b/apps/docs/content/fr/blog/incremental-adoption.mdx @@ -0,0 +1,109 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:40:18.312Z +title: Adoption progressive de Next.js +description: >- + Découvrez différentes stratégies pour adopter Next.js de manière progressive dans votre flux de développement. +author: + - name: Lee Robinson + image: /static/team/lee.jpg +date: 2020-11-18T14:00:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/twitter-card.png +--- + +[Next.js](https://nextjs.org/) a été conçu pour une adoption progressive. Avec Next.js, vous pouvez continuer à utiliser votre code existant et ajouter autant (ou aussi peu) de React que nécessaire. En commençant modestement et en ajoutant progressivement plus de pages, vous pouvez éviter de perturber le développement des fonctionnalités en évitant une réécriture complète. + +De nombreuses entreprises doivent moderniser leur stack technique pour réduire les coûts, augmenter la productivité des développeurs et offrir la meilleure expérience à leurs clients. Le développement axé sur les composants a grandement amélioré la vitesse de déploiement et la réutilisabilité des bases de code modernes. + +Et avec plus de [8 millions de téléchargements/mois](https://www.npmtrends.com/react), React est le choix principal des développeurs pour une approche basée sur les composants. Next.js, le framework React pour la production, vous permet d'adopter React progressivement. + +[Motivation](#motivation) +------------------------- + +Dans un monde de plus en plus mobile, l'amélioration et le suivi de vos [Core Web Vitals](/analytics) sont essentiels pour réussir. Vos clients sont probablement répartis dans le monde entier avec des vitesses de connexion variables. Chaque seconde (ou milliseconde) supplémentaire passée à attendre le chargement d'une page ou l'exécution d'une action peut faire la différence entre une vente, une impression ou une conversion. + +Si vous modernisez votre stack technique, vous pourriez faire face à des défis comme : + +* Votre application contient des années de code legacy difficile à comprendre et qui prendrait des années (et des millions de dollars) à réécrire complètement. +* Vos temps de chargement de page continuent d'augmenter à mesure que la taille et la complexité de l'application grandissent. Les pages marketing simples sont aussi lentes que les pages les plus complexes. +* Vous essayez de faire évoluer votre équipe de développement, mais vous rencontrez des difficultés à intégrer plus de développeurs dans la base de code existante. +* Vos processus CI/CD et DevOps sont obsolètes, ce qui réduit la productivité des développeurs et rend difficile le déploiement sûr et fiable des nouvelles modifications. +* Votre application n'est pas adaptée aux appareils mobiles et il est impossible de mettre à jour le style global des pages sans casser d'autres parties de l'application. + +Vous savez que vous devez faire _quelque chose_, mais il peut être difficile de comprendre [par où commencer](https://www.psychologytoday.com/us/blog/mindfully-present-fully-alive/201804/the-only-way-eat-elephant). En adoptant Next.js progressivement, vous pouvez commencer à résoudre les problèmes ci-dessus et transformer votre application. Discutons de quelques stratégies différentes pour intégrer Next.js dans votre stack technique existante. + +[Stratégies](#strategies) +------------------------- + +### [Sous-chemin (Subpath)](#subpath) + +La première stratégie consiste à configurer votre serveur ou proxy pour que tout ce qui se trouve sous un sous-chemin spécifique pointe vers une application Next.js. Par exemple, votre site web existant pourrait être sur `example.com`, et vous pourriez configurer votre proxy pour que `example.com/store` serve un magasin e-commerce Next.js. + +En utilisant [`basePath`](/docs/pages/api-reference/next-config-js/basePath), vous pouvez configurer les ressources et les liens de votre application Next.js pour qu'ils fonctionnent automatiquement avec votre nouveau sous-chemin `/store`. Comme chaque page dans Next.js est sa propre [route autonome](/docs/pages/building-your-application/routing), les pages comme `pages/products.js` seront routées vers `example.com/store/products` dans votre application. + +```js filename="next.config.js" +module.exports = { + basePath: '/store', +}; +``` + +Pour en savoir plus sur `basePath`, consultez notre [documentation](/docs/pages/api-reference/next-config-js/basePath). + +(**Remarque :** Cette fonctionnalité a été introduite dans Next.js 9.5 et versions ultérieures. Si vous utilisez des versions plus anciennes de Next.js, veuillez effectuer une mise à jour avant de l'essayer.) + +### [Réécritures (Rewrites)](#rewrites) + +La deuxième stratégie consiste à créer une nouvelle application Next.js qui pointe vers l'URL racine de votre domaine. Ensuite, vous pouvez utiliser [`rewrites`](/docs/pages/api-reference/next-config-js/rewrites) dans `next.config.js` pour que certains sous-chemins soient proxifiés vers votre application existante. + +Par exemple, supposons que vous ayez créé une application Next.js à servir depuis `example.com` avec le `next.config.js` suivant. Maintenant, les requêtes pour les pages que vous avez ajoutées à cette application Next.js (par exemple `/about` si vous avez ajouté `pages/about.js`) seront traitées par Next.js, et les requêtes pour toute autre route (par exemple `/dashboard`) seront proxifiées vers `proxy.example.com`. + +```js filename="next.config.js" +module.exports = { + async rewrites() { + return [ + // nous devons définir une réécriture no-op pour déclencher la vérification + // de toutes les pages/fichiers statiques avant de tenter le proxying + { + source: '/:path*', + destination: '/:path*', + }, + { + source: '/:path*', + destination: `https://proxy.example.com/:path*`, + }, + ]; + }, +}; +``` + +Pour en savoir plus sur les réécritures, consultez notre [documentation](/docs/pages/api-reference/next-config-js/rewrites). + +### [Micro-frontends avec Monorepos et Sous-domaines](#micro-frontends-with-monorepos-and-subdomains) + +Next.js et [Vercel](https://vercel.com) facilitent l'adoption des [micro-frontends](https://martinfowler.com/articles/micro-frontends.html) et le déploiement sous forme de [Monorepo](https://vercel.com/blog/monorepos). Cela vous permet d'utiliser des [sous-domaines](https://fr.wikipedia.org/wiki/Sous-domaine) pour adopter de nouvelles applications progressivement. Quelques avantages des micro-frontends : + +* Des bases de code plus petites, plus cohésives et maintenables. +* Des organisations plus évolutives avec des équipes découplées et autonomes. +* La possibilité de mettre à niveau, de mettre à jour ou même de réécrire des parties du frontend de manière plus progressive. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/light-arch.png) + +> L'architecture d'un monorepo déployé sur Vercel. + +Une fois votre monorepo configuré, poussez les modifications vers votre dépôt Git comme d'habitude et vous verrez les commits déployés sur les projets Vercel que vous avez connectés. Dites adieu aux processus CI/CD obsolètes. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/dark-comment.png) + +> Un exemple d'URLs de déploiement fournies par une intégration Git. + +[Conclusion](#conclusion) +------------------------- + +Next.js a été conçu pour une adoption progressive dans votre stack technique existante. La plateforme Vercel en fait une expérience collaborative avec des prévisualisations de déploiement pour chaque modification de code, en s'intégrant parfaitement avec GitHub, GitLab et Bitbucket. + +* Prévisualisez instantanément les modifications localement avec [Fast Refresh](/docs/architecture/fast-refresh), augmentant la productivité des développeurs. +* Poussez les modifications pour créer une [Prévisualisation de Branche](https://vercel.com/github), optimisée pour la collaboration avec les parties prenantes. +* Déployez en production avec [Vercel](https://vercel.com) en fusionnant la PR. Pas de DevOps compliqué. + +Pour en savoir plus, lisez à propos des [sous-chemins](/docs/pages/api-reference/next-config-js/basePath) et des [réécritures](/docs/pages/api-reference/next-config-js/rewrites) ou [déployez un exemple avec des micro-frontends](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-zones). \ No newline at end of file diff --git a/apps/docs/content/fr/blog/june-2023-update.mdx b/apps/docs/content/fr/blog/june-2023-update.mdx new file mode 100644 index 00000000..101b357f --- /dev/null +++ b/apps/docs/content/fr/blog/june-2023-update.mdx @@ -0,0 +1,148 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:40:58.646Z +title: Mise à jour du routeur d'application Next.js +description: >- + L'équipe Next.js se concentre sur les performances, la stabilité et l'expérience + développeur pour les prochains mois. +author: + - name: Delba de Oliveira + image: /static/team/delba.jpg + - name: Lee Robinson + image: /static/team/lee.jpg +date: 2023-06-22T14:00:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/june-2023-update/twitter-card.png +--- + +Le routeur d'application représente une nouvelle fondation pour l'avenir de Next.js, mais nous reconnaissons qu'il existe des opportunités pour améliorer l'expérience. Nous souhaitons faire un point sur nos priorités actuelles. + +Pour les prochaines versions de Next.js, nous nous concentrons sur les domaines suivants : + +* **Amélioration des performances** +* **Amélioration de la stabilité** +* **Amélioration de la formation des développeurs** + +[Le routeur d'application](#the-app-router) +--------------------------------- + +Tout d'abord, il est utile de fournir un contexte sur la conception du routeur d'application. + +### [Dépasser le routeur Pages en s'alignant sur React](#growing-beyond-the-pages-router-by-aligning-with-react) + +Alors que nous observions une adoption croissante et des applications à plus grande échelle construites avec Next.js, nous avons reçu des retours de la communauté et identifié des domaines où nous commencions à atteindre les limites du routeur Pages. + +Plus particulièrement, le routeur Pages de Next.js n'était pas conçu pour le streaming, une primitive fondamentale dans React moderne, qui nous aide à adresser les limitations rencontrées et à réaliser notre vision à long terme pour Next.js. + +Créer des APIs de framework compatibles avec le streaming pour la récupération de données, le chargement d'assets et les métadonnées de page, ainsi que tirer parti des nouvelles primitives de React, a nécessité des changements majeurs dans l'architecture cœur de Next.js. + +Nous avons saisi l'opportunité de construire sur les [dernières fonctionnalités concurrentes de React](https://react.dev/blog/2023/05/03/react-canaries), comme les composants serveur, Suspense, et plus encore, qui ont été [conçus pour des architectures de streaming](https://github.com/reactwg/react-18/discussions/37). + +### [L'adoption progressive est non négociable](#incremental-adoption-is-non-negotiable) + +Nous ne voulions pas que notre communauté ait à reconstruire entièrement ses applications pour migrer vers la dernière version de Next.js. Nous croyons que l'adoption progressive est la meilleure stratégie pour faire évoluer les applications dans le temps. + +* **Migration progressive par route** : Sans réécriture majeure de votre application, vous pouvez déplacer une seule route de votre application vers le routeur d'application et commencer à profiter des nouvelles fonctionnalités à votre rythme. Consultez notre [guide d'adoption progressive](/docs/app/building-your-application/upgrading/app-router-migration) ou [regardez un tutoriel](https://www.youtube.com/watch?v=YQMSietiFm0). +* **Retour arrière facile** : Si vous n'êtes pas satisfait des performances ou de l'expérience développeur du routeur d'application, vous pouvez facilement revenir au routeur Pages pour cette route spécifique. + +Nous explorons d'autres opportunités pour rendre l'adoption progressive encore plus simple. + +### [Route vers la stabilité](#road-to-stability) + +Nous avons commencé à construire le routeur d'application Next.js il y a plus d'un an et avons régulièrement publié de nouvelles fonctionnalités et améliorations depuis. + +* **Annonce initiale** : En mai de cette année, nous avons [publié un RFC](/blog/layouts-rfc) pour décrire nos plans visant à rendre le routage et les layouts plus flexibles. +* **Bêta précoce** : Dans Next.js 13, nous avons publié la première version du routeur d'application, permettant à la communauté de l'essayer et de fournir des retours précoces. +* **API stable** : En réponse aux retours, nous avons concentré nos efforts sur la finalisation de l'API cœur. Dans la version 13.4, nous avons marqué l'API cœur du routeur d'application comme stable et prête pour une adoption plus large. + +[Notre focus actuel](#our-current-focus) +--------------------------------------- + +Marquer la stabilité a signalé à la communauté que l'API cœur était figée et ne subirait pas de changements majeurs cassants nécessitant des réécritures. + +Depuis, nous avons reçu de nombreux retours précieux et l'adoption croissante a inévitablement révélé des bugs et des opportunités d'amélioration. + +Nous voulons que vous sachiez que nous **ne sommes pas encore satisfaits** de l'expérience d'utilisation du routeur d'application et que c'est notre priorité absolue pour la suite. Parlons donc du travail que nous faisons pour améliorer cette expérience. + +### [Amélioration des performances](#improving-performance) + +Dans les prochains mois, nous nous concentrons sur trois aspects des performances : la vitesse d'itération locale, les temps de build en production, et les performances serverless. + +#### [Performances en développement local](#local-development-performance) + +Alors que Next.js a mûri et que la taille des applications construites avec a augmenté, nous avons progressivement remplacé des parties de son architecture sous-jacente par des outils plus rapides et plus évolutifs. + +* **Progrès de la migration** : Nous avons commencé par remplacer Babel _(compilation)_ et Terser _(minification)_ par [SWC](/docs/architecture/nextjs-compiler). Cela a aidé à améliorer les vitesses d'itération locale et les temps de build en production. + +* **Investissement à long terme** : Maintenir d'excellentes performances de Fast Refresh quelle que soit la taille d'une application signifie faire fonctionner Next.js de manière aussi incrémentale que possible pendant le développement local, en ne bundleant et compilant que le code nécessaire. + + C'est pourquoi nous travaillons actuellement à remplacer webpack _(bundling)_ par [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), qui est construit sur un moteur de calcul incrémental bas niveau permettant une mise en cache jusqu'au niveau des fonctions individuelles. + + Les applications Next.js passant à Turbopack verront des améliorations soutenues de la vitesse de Fast Refresh même lorsqu'elles grandissent en taille. + + Ces derniers mois, l'équipe Turbo s'est concentrée sur l'amélioration des performances de Turbopack et le support de toutes les fonctionnalités Next.js et APIs du routeur d'application. + + Turbopack est actuellement [disponible en bêta](/docs/architecture/turbopack) (`next dev --turbo`). + +* **Amélioration de l'architecture actuelle** : En plus d'investir dans le futur, nous continuons à apporter des améliorations de performances à notre architecture webpack existante. + + Pour certaines applications Next.js, en particulier celles rafraîchissant des milliers de modules, nous avons vu des rapports d'instabilité avec le développement local et Fast Refresh. Nous travaillons à améliorer les performances et la fiabilité ici. Par exemple, nous avons récemment ajouté des paramètres préconfigurés (`modularizeImports`) pour gérer [les grandes bibliothèques d'icônes](https://github.com/vercel/next.js/pull/50900) qui pourraient accidentellement forcer des milliers de modules à se recharger à chaque requête. + + +#### [Performances au moment du build](#build-time-performance) + +Nous travaillons également sur les builds de production avec Turbopack (`next build --turbo`) et avons [commencé à intégrer](https://github.com/vercel/next.js/pull/51546) les premières parties de ce travail. Attendez-vous à plus de mises à jour dans les prochaines versions. + +#### [Performances en production](#production-performance) + +Enfin, sur Vercel, nous travaillons à optimiser les performances et l'utilisation mémoire des Vercel Functions [définies via le code d'application Next.js](https://vercel.com/blog/framework-defined-infrastructure), garantissant des démarrages à froid minimaux tout en conservant les bénéfices d'une architecture serverless évolutive. Ce travail a abouti à de nouvelles [capacités de traçage](/docs/app/building-your-application/optimizing/open-telemetry) (expérimental) dans Next.js et des explorations précoces d'outils côté serveur pour les développeurs. + +[Amélioration de la stabilité](#improving-stability) +------------------------------------------- + +Le routeur Pages existe depuis six ans maintenant. La sortie du routeur d'application a signifié l'introduction de nouvelles APIs encore jeunes, avec seulement six mois d'utilisation. Nous avons fait beaucoup de chemin en peu de temps, mais il reste des opportunités d'amélioration alors que nous apprenons davantage de notre communauté et de son utilisation. + +Nous apprécions la volonté de la communauté d'adopter rapidement le routeur d'application et de fournir des retours. Il y a eu un nombre de rapports de bugs que nous investiguons et nous sommes reconnaissants pour les reproductions minimales que vous avez créées pour aider à isoler les problèmes et vérifier les correctifs. + +Depuis la 13.4, nous avons déjà corrigé plusieurs bugs à fort impact sur la stabilité, disponibles dans la dernière version de correctif (`13.4.7`). Nous continuerons à nous concentrer intensément sur les performances et la stabilité. + +[Amélioration de la formation des développeurs](#improving-developer-education) +--------------------------------------------------------------- + +Bien que nous croyions que les nouvelles fonctionnalités du routeur d'application et de React moderne sont puissantes, elles nécessitent également une formation et une documentation supplémentaires pour enseigner ces nouveaux concepts. + +### [Fonctionnalités Next.js](#nextjs-features) + +Nous avons travaillé cette dernière année à réécrire la documentation Next.js à partir de zéro. Ce travail est maintenant en ligne sur [nextjs.org/docs](/docs). Nous souhaitons mettre en avant quelques [éléments importants](https://twitter.com/delba_oliveira/status/1664323492077256704) : + +* **Bascule entre Pages et App** : Vous pouvez alterner entre l'apprentissage du routeur Pages ou du routeur d'application en utilisant le bouton sur le côté gauche de la documentation. De plus, vous pouvez filtrer les résultats de recherche en fonction de votre choix de routeur. +* **Contenu et architecture d'information améliorés** : Presque chaque page de la documentation du routeur d'application a été rafraîchie, avec une structure plus claire et une cohérence accrue entre les pages, ainsi que des centaines de nouvelles illustrations pour expliquer visuellement comment Next.js fonctionne. +* **Plus à venir** : Nous avons encore du travail ici. L'équipe Expérience Développeur chez Vercel travaille dur pour fournir des ressources d'apprentissage supplémentaires (y compris un cours mis à jour sur `/learn` enseignant le routeur d'application) et des exemples de codebase réels (y compris une réécriture de [Next.js Commerce](https://github.com/vercel/commerce)). + +Nous publierons de nouveaux contenus dans la [documentation](/docs), sur [Twitter](https://twitter.com/nextjs), [YouTube](https://www.youtube.com/c/VercelHQ), et plus encore. + +### [Nouvelles fonctionnalités React](#new-react-features) + +Nous avons également entendu vos retours concernant la formation autour des nouvelles fonctionnalités React disponibles dans le routeur d'application Next.js. + +* **Composants serveur** : Il est important de noter que des fonctionnalités comme les composants serveur et des conventions comme la directive [`"use client"`](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) ne sont pas spécifiques à Next.js, mais font partie d'un écosystème React plus large. + + Notre équipe, nos partenaires chez Meta, et d'autres contributeurs indépendants travaillent à fournir plus de formation sur ces sujets. Ces concepts en sont à leurs débuts, mais nous avons confiance dans l'écosystème React et la [formation continue](https://github.com/reactwg/server-components/discussions/5). + +* **Composants client** : Avec la récente conversation autour des composants serveur, il est important de noter que les composants client ne sont _pas_ une dé-optimisation. Le client est une partie valide du modèle React et ne disparaîtra pas. + + Vous pouvez considérer les composants client comme l'écosystème Next.js existant aujourd'hui, où vos bibliothèques et outils préférés continuent de fonctionner. Par exemple, une question commune que nous avons vue est de savoir si `"use client"` doit être ajouté à chaque fichier pour en faire un composant client. Ce n'est pas nécessaire, mais nous comprenons que ces concepts sont nouveaux et prendront du temps à apprendre. Vous n'avez besoin que de [marquer la limite de niveau supérieur](/docs/getting-started/react-essentials#the-use-client-directive) où votre code passe du serveur au client. Cette architecture vous permet d'[entrelacer composants serveur et client](https://github.com/reactwg/server-components/discussions/5). + +* **Croissance de l'écosystème tiers** : En plus de la formation, l'écosystème autour des nouvelles fonctionnalités de React est encore en croissance. Par exemple, [Panda CSS](https://panda-css.com/), une bibliothèque CSS-in-JS des créateurs de Chakra UI, vient d'annoncer le support des composants serveur React. + +* **Actions serveur (Alpha)** : Les [actions serveur](/docs/app/building-your-application/data-fetching/server-actions) permettent des mutations de données côté serveur, réduisent le JavaScript côté client et améliorent progressivement les formulaires. Nous ne recommandons pas encore d'utiliser les actions serveur en production. Nous apprécions les retours précoces des testeurs alpha nous aidant à façonner le futur de cette fonctionnalité. + + +[Merci](#thank-you) +----------------------- + +Nous sommes reconnaissants que beaucoup d'entre vous aient choisi d'apprendre et de construire avec Next.js. + +Notre focus sur les performances, la stabilité et l'expérience développeur se reflètera dans les prochaines versions de Next.js. Nous voulons que l'utilisation de Next.js soit un plaisir - et vous rendre (ainsi que votre équipe) plus productifs. + +Comme toujours, nous apprécions grandement vos retours. Si vous rencontrez des problèmes avec Next.js, veuillez [ouvrir un ticket](https://github.com/vercel/next.js/issues/new/choose), ou [démarrer une nouvelle discussion](https://github.com/vercel/next.js/discussions), et nous investiguerons. \ No newline at end of file diff --git a/apps/docs/content/fr/blog/layouts-rfc.mdx b/apps/docs/content/fr/blog/layouts-rfc.mdx new file mode 100644 index 00000000..8f7e6d5a --- /dev/null +++ b/apps/docs/content/fr/blog/layouts-rfc.mdx @@ -0,0 +1,911 @@ +--- +source-updated-at: 2025-05-29T19:07:21.000Z +translation-updated-at: 2025-06-02T19:47:31.800Z +title: RFC sur les Layouts +description: >- + Routes imbriquées et layouts, routage côté client et serveur, fonctionnalités de React 18, + et conçu pour les Server Components. +author: + - name: Delba de Oliveira + image: /static/team/delba.jpg + - name: Lee Robinson + image: /static/team/lee.jpg + - name: Sebastian Markbåge + image: /static/team/seb.jpg + - name: Tim Neutkens + image: /static/team/tim.jpg +date: 2022-05-23T20:30:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/twitter-card.png +--- + +Ce RFC (Request for Comment) présente la plus grande mise à jour de Next.js depuis son introduction en 2016 : + +* **Layouts imbriqués :** Construisez des applications complexes avec des routes imbriquées. +* **Conçu pour les Server Components :** Optimisé pour la navigation dans les sous-arbres. +* **Amélioration du chargement des données :** Chargez dans les layouts tout en évitant les cascades. +* **Utilisation des fonctionnalités de React 18 :** Streaming, Transitions et Suspense. +* **Routage côté client et serveur :** Routage centré serveur avec un comportement _SPA-like_. +* **Adoption 100% progressive :** Aucun changement cassant pour une adoption graduelle. +* **Modèles de routage avancés :** Routes parallèles, routes d'interception, et plus encore. + +Le nouveau routeur Next.js sera construit sur les [fonctionnalités récemment publiées de React 18](https://reactjs.org/blog/2022/03/29/react-v18.html). Nous prévoyons d'introduire des conventions qui vous permettront d'adopter facilement ces nouvelles fonctionnalités et de profiter de leurs avantages. + +> Le travail sur ce RFC est en cours et nous annoncerons quand les nouvelles fonctionnalités seront disponibles. Pour donner votre avis, rejoignez la conversation sur [Github Discussions](https://github.com/vercel/next.js/discussions/37136). + +[Table des matières](#table-des-matières) +---------------------------------------- + +* [Motivation](#motivation) +* [Terminologie](#terminologie) +* [Fonctionnement actuel du routage](#fonctionnement-actuel-du-routage) +* [Le répertoire `app`](#introduction-du-répertoire-app) +* [Définition des routes](#définition-des-routes) +* [Layouts](#layouts) +* [Pages](#pages) +* [React Server Components](#react-server-components) +* [Chargement des données](#chargement-des-données) +* [Groupes de routes (Nouveau)](#groupes-de-routes) +* [Routage centré serveur (Nouveau)](#routage-centré-serveur) +* [États de chargement instantané (Nouveau)](#états-de-chargement-instantané) +* [Gestion des erreurs (Nouveau)](#gestion-des-erreurs) +* [Modèles (Nouveau)](#modèles) +* [Modèles de routage avancés (Nouveau)](#modèles-de-routage-avancés) +* [Conclusion](#conclusion) + +[Motivation](#motivation) +------------------------- + +Nous avons recueilli les retours de la communauté via GitHub, Discord, Reddit et notre enquête développeur sur les limitations actuelles du routage dans Next.js. Nous avons constaté que : + +* L'expérience développeur pour créer des layouts peut être améliorée. Il devrait être facile de créer des layouts imbriqués, partagés entre routes et préservant leur état lors de la navigation. +* De nombreuses applications Next.js sont des tableaux de bord ou consoles qui bénéficieraient de solutions de routage plus avancées. + +Bien que le système de routage actuel ait bien fonctionné depuis les débuts de Next.js, nous voulons faciliter la construction d'applications web plus performantes et riches en fonctionnalités. + +En tant que mainteneurs du framework, nous voulons aussi construire un système de routage rétrocompatible et aligné avec le futur de React. + +> **Note :** Certaines conventions de routage s'inspirent du routeur basé sur Relay chez Meta, où certaines fonctionnalités des Server Components ont été développées, ainsi que des routeurs côté client comme React Router et Ember.js. La convention de fichier `layout.js` s'inspire du travail effectué dans SvelteKit. Nous remercions également [Cassidy](https://twitter.com/cassidoo) pour avoir ouvert [un RFC précédent sur les layouts](https://github.com/vercel/next.js/discussions/26389). + +[Terminologie](#terminologie) +---------------------------- + +Ce RFC introduit de nouvelles conventions et syntaxes de routage. La terminologie est basée sur React et les termes standards du web. Tout au long du RFC, vous verrez ces termes liés à leurs définitions ci-dessous. + +* **Arbre :** Convention pour visualiser une structure hiérarchique. Par exemple, un arbre de composants avec des composants parents et enfants, une structure de dossiers, etc. +* **Sous-arbre :** Partie de l'arbre, commençant à la racine (premier) et se terminant aux feuilles (dernier). + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/terminology.png) + +* **Chemin URL :** Partie de l'URL qui suit le domaine. +* **Segment URL :** Partie du chemin URL délimitée par des slashs. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/url-anatomy.png) + +[Fonctionnement actuel du routage](#fonctionnement-actuel-du-routage) +-------------------------------------------------------------------- + +Aujourd'hui, Next.js utilise le système de fichiers pour mapper les dossiers et fichiers individuels dans le répertoire [Pages](/docs/pages/building-your-application/routing/pages-and-layouts) aux routes accessibles via les URLs. Chaque fichier **page** exporte un composant React et a une **route** associée basée sur son nom de fichier. Par exemple : + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routing-today.png) + +* **Routes dynamiques :** Next.js prend en charge les [Routes dynamiques](/docs/pages/building-your-application/routing/dynamic-routes) (y compris les variations catch-all) avec les conventions `[param].js`, `[...param].js` et `[[...param]].js`. +* **Layouts :** Next.js offre un support pour des layouts simples [basés sur des composants](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern), des layouts par page utilisant un [modèle de propriété](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts), et un layout global unique utilisant une [app personnalisée](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#single-shared-layout-with-custom-app). +* **Chargement des données :** Next.js fournit des méthodes de chargement de données ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)) utilisables au niveau de la page (route). Ces méthodes déterminent si une page doit être générée statiquement ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)) ou rendue côté serveur ([`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)). Vous pouvez aussi utiliser la [Regénération Statique Incrémentielle (ISR)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) pour créer ou mettre à jour des pages statiques après la construction du site. +* **Rendu :** Next.js propose trois options de rendu : [Génération Statique](https://nextjs.org/learn/foundations/how-nextjs-works/rendering), [Rendu côté Serveur](https://nextjs.org/learn/foundations/how-nextjs-works/rendering), et [Rendu côté Client](https://nextjs.org/learn/foundations/how-nextjs-works/rendering). Par défaut, les pages sont générées statiquement sauf si elles ont un besoin de chargement de données bloquant (`getServerSideProps`). + +[Introduction du répertoire `app`](#introduction-du-répertoire-app) +------------------------------------------------------------------ + +Pour garantir que ces nouvelles améliorations puissent être adoptées progressivement et éviter les changements cassants, nous proposons un nouveau répertoire appelé `app`. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/app-folder.png) + +Le répertoire `app` fonctionnera conjointement avec le répertoire `pages`. Vous pouvez déplacer progressivement des parties de votre application vers le nouveau répertoire `app` pour profiter des nouvelles fonctionnalités. Pour la rétrocompatibilité, le comportement du répertoire `pages` restera le même et continuera d'être supporté. + +[Définition des routes](#définition-des-routes) +---------------------------------------------- + +Vous pouvez utiliser la hiérarchie des **dossiers** dans `app` pour définir les routes. Une **route** est un chemin unique de dossiers imbriqués, suivant la hiérarchie depuis le **dossier racine** jusqu'à un **dossier feuille** final. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routes.png) + +Par exemple, vous pouvez ajouter une nouvelle route `/dashboard/settings` en imbriquant deux nouveaux dossiers dans le répertoire `app`. + +> **Note :** +> +> * Avec ce système, vous utiliserez les dossiers pour définir les routes et les fichiers pour définir l'UI (avec de nouvelles conventions de fichiers comme `layout.js`, `page.js`, et dans la deuxième partie du RFC `loading.js`). +> * Cela vous permet de colocaliser vos propres fichiers de projet (composants UI, fichiers de test, stories, etc.) dans le répertoire `app`. Actuellement, ce n'est possible qu'avec la [configuration pageExtensions](/docs/pages/api-reference/next-config-js/pageExtensions#including-non-page-files-in-the-pages-directory). + +### [Segments de route](#segments-de-route) + +Chaque dossier dans le [sous-arbre](#terminologie) représente un **segment de route**. Chaque segment de route est mappé à un **segment** correspondant dans un **[chemin URL](#terminologie)**. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-segments.png) + +Par exemple, la route `/dashboard/settings` est composée de 3 segments : + +* Le segment racine `/` +* Le segment `dashboard` +* Le segment `settings` + +> **Note :** Le nom **segment de route** a été choisi pour correspondre à la terminologie existante autour des [chemins URL](#terminologie). + +[Layouts](#layouts) +------------------- + +**Nouvelle convention de fichier :** `layout.js` + +Jusqu'à présent, nous avons utilisé des dossiers pour définir les routes de notre application. Mais les dossiers vides ne font rien par eux-mêmes. Voyons comment vous pouvez définir l'UI qui sera rendue pour ces routes en utilisant de nouvelles conventions de fichiers. + +Un **layout** est une UI partagée entre les segments de route dans un [sous-arbre](#terminologie). Les layouts n'affectent pas les [chemins URL](#terminologie) et ne se re-rendent pas (l'état React est préservé) lorsqu'un utilisateur navigue entre des segments frères. + +Un layout peut être défini en exportant par défaut un composant React depuis un fichier `layout.js`. Le composant doit accepter une prop `children` qui sera remplie avec les segments que le layout englobe. + +Il existe 2 types de layouts : + +* **Layout racine :** S'applique à toutes les routes +* **Layout régulier :** S'applique à des routes spécifiques + +Vous pouvez imbriquer deux layouts ou plus pour former des **layouts imbriqués**. + +### [Layout racine](#layout-racine) + +Vous pouvez créer un layout racine qui s'appliquera à toutes les routes de votre application en ajoutant un fichier `layout.js` dans le dossier `app`. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/root-layout.png) + +> **Note :** +> +> * Le layout racine remplace le besoin d'une [App personnalisée (`_app.js`)](/docs/pages/building-your-application/routing/custom-app) et d'un [Document personnalisé (`_document.js`)](/docs/pages/building-your-application/routing/custom-document) puisqu'il s'applique à toutes les routes. +> * Vous pourrez utiliser le layout racine pour personnaliser le shell initial du document (par ex. les balises `` et ``). +> * Vous pourrez charger des données dans le layout racine (et d'autres layouts). + +### [Layouts réguliers](#layouts-réguliers) + +Vous pouvez aussi créer un layout qui ne s'applique qu'à une partie de votre application en ajoutant un fichier `layout.js` dans un dossier spécifique. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/regular-layouts.png) + +Par exemple, vous pouvez créer un fichier `layout.js` dans le dossier `dashboard` qui ne s'appliquera qu'aux segments de route à l'intérieur de `dashboard`. + +### [Imbrication des layouts](#imbrication-des-layouts) + +Les layouts sont **imbriqués** par défaut. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts.png) + +Par exemple, si nous combinons les deux layouts ci-dessus. Le layout racine (`app/layout.js`) serait appliqué au layout `dashboard`, qui s'appliquerait aussi à tous les segments de route à l'intérieur de `dashboard/*`. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts-example.png) + +[Pages](#pages) +--------------- + +**Nouvelle convention de fichier :** `page.js` + +Une page est une UI unique à un segment de route. Vous pouvez créer une page en ajoutant un fichier `page.js` dans un dossier. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page.png) + +Par exemple, pour créer des pages pour les routes `/dashboard/*`, vous pouvez ajouter un fichier `page.js` dans chaque dossier. Quand un utilisateur visite `/dashboard/settings`, Next.js rendra le fichier `page.js` du dossier `settings` encapsulé dans tous les layouts existants plus haut dans le [sous-arbre](#terminologie). + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-example.png) + +Vous pouvez créer un fichier `page.js` directement dans le dossier dashboard pour correspondre à la route `/dashboard`. Le layout dashboard s'appliquera aussi à cette page : + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-nested.png) + +Cette route est composée de 2 segments : + +* Le segment racine `/` +* Le segment `dashboard` + +> **Note :** +> +> * Pour qu'une route soit valide, elle doit avoir une page dans son segment feuille. Sinon, la route générera une erreur. + +### [Comportement des Layouts et Pages](#comportement-des-layouts-et-pages) + +* Les extensions de fichiers `js|jsx|ts|tsx` peuvent être utilisées pour les Pages et Layouts. +* Les composants Page sont l'export par défaut de `page.js`. +* Les composants Layout sont l'export par défaut de `layout.js`. +* Les composants Layout **doivent** accepter une prop `children`. + +Quand un composant layout est rendu, la prop `children` sera remplie avec un layout enfant (s'il existe plus bas dans le [sous-arbre](#terminologie)) ou une page. + +Il peut être plus facile de le visualiser comme un [arbre](#terminologie) de layouts où le layout parent choisira le layout enfant le plus proche jusqu'à atteindre une page. + +**Exemple :** + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/basic-example.png) + +```js filename="app/layout.js" +// Layout racine +// - S'applique à toutes les routes +export default function RootLayout({ children }) { + return ( + + +
+ {children} +