From 50f433fab6f397f889025380064716d9bc4a4a22 Mon Sep 17 00:00:00 2001 From: xiaoyu2er Date: Mon, 2 Jun 2025 19:48:13 +0000 Subject: [PATCH] docs: update documentation translations --- .../de/blog/building-apis-with-nextjs.mdx | 396 ++++++++ .../content/de/blog/composable-caching.mdx | 202 ++++ apps/docs/content/de/blog/create-next-app.mdx | 39 + .../content/de/blog/incremental-adoption.mdx | 109 +++ .../docs/content/de/blog/june-2023-update.mdx | 147 +++ apps/docs/content/de/blog/layouts-rfc.mdx | 911 ++++++++++++++++++ apps/docs/content/de/blog/next-10-1.mdx | 231 +++++ apps/docs/content/de/blog/next-10-2.mdx | 183 ++++ apps/docs/content/de/blog/next-10.mdx | 427 ++++++++ apps/docs/content/de/blog/next-11.mdx | 218 +++++ apps/docs/content/de/blog/next-12-1.mdx | 218 +++++ apps/docs/content/de/blog/next-12-2.mdx | 271 ++++++ apps/docs/content/de/blog/next-12-3.mdx | 181 ++++ apps/docs/content/de/blog/next-12.mdx | 271 ++++++ apps/docs/content/de/blog/next-13-1.mdx | 216 +++++ apps/docs/content/de/blog/next-13-2.mdx | 374 +++++++ apps/docs/content/de/blog/next-13-3.mdx | 273 ++++++ apps/docs/content/de/blog/next-13-4.mdx | 465 +++++++++ apps/docs/content/de/blog/next-13-5.mdx | 179 ++++ apps/docs/content/de/blog/next-13.mdx | 430 +++++++++ apps/docs/content/de/blog/next-14-1.mdx | 272 ++++++ apps/docs/content/de/blog/next-14-2.mdx | 218 +++++ apps/docs/content/de/blog/next-14.mdx | 297 ++++++ apps/docs/content/de/blog/next-15-1.mdx | 293 ++++++ apps/docs/content/de/blog/next-15-2.mdx | 229 +++++ apps/docs/content/de/blog/next-15-3.mdx | 207 ++++ apps/docs/content/de/blog/next-15-rc.mdx | 347 +++++++ apps/docs/content/de/blog/next-15-rc2.mdx | 405 ++++++++ apps/docs/content/de/blog/next-15.mdx | 571 +++++++++++ apps/docs/content/de/blog/next-5-1.mdx | 184 ++++ apps/docs/content/de/blog/next-5.mdx | 362 +++++++ apps/docs/content/de/blog/next-6-1.mdx | 141 +++ apps/docs/content/de/blog/next-6.mdx | 175 ++++ apps/docs/content/de/blog/next-7.mdx | 387 ++++++++ apps/docs/content/de/blog/next-8-0-4.mdx | 174 ++++ apps/docs/content/de/blog/next-8-1.mdx | 146 +++ apps/docs/content/de/blog/next-8.mdx | 349 +++++++ apps/docs/content/de/blog/next-9-0-7.mdx | 256 +++++ apps/docs/content/de/blog/next-9-1-7.mdx | 217 +++++ apps/docs/content/de/blog/next-9-1.mdx | 197 ++++ apps/docs/content/de/blog/next-9-2.mdx | 219 +++++ apps/docs/content/de/blog/next-9-3.mdx | 534 ++++++++++ apps/docs/content/de/blog/next-9-4.mdx | 297 ++++++ apps/docs/content/de/blog/next-9-5.mdx | 398 ++++++++ apps/docs/content/de/blog/next-9.mdx | 438 +++++++++ .../de/blog/our-journey-with-caching.mdx | 219 +++++ ...urity-nextjs-server-components-actions.mdx | 391 ++++++++ .../de/blog/styling-next-with-styled-jsx.mdx | 373 +++++++ .../blog/turbopack-for-development-stable.mdx | 295 ++++++ apps/docs/content/de/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 ++++ .../de/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 | 79 ++ .../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 ++++ .../de/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 + .../de/learn/03-pages-router/index.mdx | 53 + .../de/learn/04-seo/01-importance-of-seo.mdx | 28 + .../de/learn/04-seo/02-search-systems.mdx | 18 + .../de/learn/04-seo/03-webcrawlers.mdx | 43 + .../learn/04-seo/04-crawling-and-indexing.mdx | 16 + .../de/learn/04-seo/05-status-codes.mdx | 132 +++ .../content/de/learn/04-seo/06-robots-txt.mdx | 36 + .../de/learn/04-seo/07-xml-sitemaps.mdx | 107 ++ .../content/de/learn/04-seo/08-metatags.mdx | 96 ++ .../content/de/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/de/learn/04-seo/12-amp.mdx | 15 + .../de/learn/04-seo/13-url-structure.mdx | 122 +++ .../content/de/learn/04-seo/14-metadata.mdx | 212 ++++ .../de/learn/04-seo/15-on-page-seo.mdx | 81 ++ .../de/learn/04-seo/16-web-performance.mdx | 23 + .../de/learn/04-seo/17-vitals-overview.mdx | 24 + apps/docs/content/de/learn/04-seo/18-lcp.mdx | 27 + apps/docs/content/de/learn/04-seo/19-fid.mdx | 23 + apps/docs/content/de/learn/04-seo/20-cls.mdx | 25 + .../content/de/learn/04-seo/21-seo-impact.mdx | 40 + .../content/de/learn/04-seo/22-improve.mdx | 19 + .../content/de/learn/04-seo/23-lighthouse.mdx | 70 ++ .../content/de/learn/04-seo/24-images.mdx | 85 ++ .../de/learn/04-seo/25-dynamic-imports.mdx | 70 ++ .../04-seo/26-dynamic-import-components.mdx | 66 ++ .../docs/content/de/learn/04-seo/27-fonts.mdx | 27 + .../learn/04-seo/28-third-party-scripts.mdx | 54 ++ .../content/de/learn/04-seo/29-monitor.mdx | 17 + .../learn/04-seo/30-nextjs-speed-insights.mdx | 14 + .../de/learn/04-seo/31-custom-reporting.mdx | 41 + .../de/learn/04-seo/32-other-tools.mdx | 20 + .../de/learn/04-seo/33-data-studio.mdx | 26 + apps/docs/content/de/learn/04-seo/index.mdx | 28 + 159 files changed, 24542 insertions(+) create mode 100644 apps/docs/content/de/blog/building-apis-with-nextjs.mdx create mode 100644 apps/docs/content/de/blog/composable-caching.mdx create mode 100644 apps/docs/content/de/blog/create-next-app.mdx create mode 100644 apps/docs/content/de/blog/incremental-adoption.mdx create mode 100644 apps/docs/content/de/blog/june-2023-update.mdx create mode 100644 apps/docs/content/de/blog/layouts-rfc.mdx create mode 100644 apps/docs/content/de/blog/next-10-1.mdx create mode 100644 apps/docs/content/de/blog/next-10-2.mdx create mode 100644 apps/docs/content/de/blog/next-10.mdx create mode 100644 apps/docs/content/de/blog/next-11.mdx create mode 100644 apps/docs/content/de/blog/next-12-1.mdx create mode 100644 apps/docs/content/de/blog/next-12-2.mdx create mode 100644 apps/docs/content/de/blog/next-12-3.mdx create mode 100644 apps/docs/content/de/blog/next-12.mdx create mode 100644 apps/docs/content/de/blog/next-13-1.mdx create mode 100644 apps/docs/content/de/blog/next-13-2.mdx create mode 100644 apps/docs/content/de/blog/next-13-3.mdx create mode 100644 apps/docs/content/de/blog/next-13-4.mdx create mode 100644 apps/docs/content/de/blog/next-13-5.mdx create mode 100644 apps/docs/content/de/blog/next-13.mdx create mode 100644 apps/docs/content/de/blog/next-14-1.mdx create mode 100644 apps/docs/content/de/blog/next-14-2.mdx create mode 100644 apps/docs/content/de/blog/next-14.mdx create mode 100644 apps/docs/content/de/blog/next-15-1.mdx create mode 100644 apps/docs/content/de/blog/next-15-2.mdx create mode 100644 apps/docs/content/de/blog/next-15-3.mdx create mode 100644 apps/docs/content/de/blog/next-15-rc.mdx create mode 100644 apps/docs/content/de/blog/next-15-rc2.mdx create mode 100644 apps/docs/content/de/blog/next-15.mdx create mode 100644 apps/docs/content/de/blog/next-5-1.mdx create mode 100644 apps/docs/content/de/blog/next-5.mdx create mode 100644 apps/docs/content/de/blog/next-6-1.mdx create mode 100644 apps/docs/content/de/blog/next-6.mdx create mode 100644 apps/docs/content/de/blog/next-7.mdx create mode 100644 apps/docs/content/de/blog/next-8-0-4.mdx create mode 100644 apps/docs/content/de/blog/next-8-1.mdx create mode 100644 apps/docs/content/de/blog/next-8.mdx create mode 100644 apps/docs/content/de/blog/next-9-0-7.mdx create mode 100644 apps/docs/content/de/blog/next-9-1-7.mdx create mode 100644 apps/docs/content/de/blog/next-9-1.mdx create mode 100644 apps/docs/content/de/blog/next-9-2.mdx create mode 100644 apps/docs/content/de/blog/next-9-3.mdx create mode 100644 apps/docs/content/de/blog/next-9-4.mdx create mode 100644 apps/docs/content/de/blog/next-9-5.mdx create mode 100644 apps/docs/content/de/blog/next-9.mdx create mode 100644 apps/docs/content/de/blog/our-journey-with-caching.mdx create mode 100644 apps/docs/content/de/blog/security-nextjs-server-components-actions.mdx create mode 100644 apps/docs/content/de/blog/styling-next-with-styled-jsx.mdx create mode 100644 apps/docs/content/de/blog/turbopack-for-development-stable.mdx create mode 100644 apps/docs/content/de/blog/webpack-memory.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/01-what-is-react-and-nextjs.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/02-rendering-ui.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/03-updating-ui-with-javascript.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/04-getting-started-with-react.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/05-building-ui-with-components.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/06-displaying-data-with-props.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/07-updating-state.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/08-from-react-to-nextjs.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/09-installation.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/10-server-and-client-components.mdx create mode 100644 apps/docs/content/de/learn/01-react-foundations/index.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/01-getting-started.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/02-css-styling.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/03-optimizing-fonts-images.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/04-creating-layouts-and-pages.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/05-navigating-between-pages.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/06-setting-up-your-database.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/07-fetching-data.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/08-static-and-dynamic-rendering.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/09-streaming.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/10-partial-prerendering.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/11-adding-search-and-pagination.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/12-mutating-data.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/13-error-handling.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/14-improving-accessibility.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/15-adding-authentication.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/16-adding-metadata.mdx create mode 100644 apps/docs/content/de/learn/02-dashboard-app/index.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/01-create-nextjs-app-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/02-create-nextjs-app-welcome-to-nextjs.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/03-create-nextjs-app-editing-the-page.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/04-navigate-between-pages.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/05-navigate-between-pages-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/06-navigate-between-pages-pages-in-nextjs.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/07-navigate-between-pages-link-component.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/08-navigate-between-pages-client-side.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/09-assets-metadata-css-layout-component.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/10-assets-metadata-css.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/11-assets-metadata-css-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/12-assets-metadata-css-assets.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/13-assets-metadata-css-metadata.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/14-assets-metadata-css-third-party-javascript.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/15-assets-metadata-css-css-styling.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/16-assets-metadata-css-global-styles.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/17-assets-metadata-css-polishing-layout.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/18-assets-metadata-css-styling-tips.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/19-data-fetching-blog-data.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/20-data-fetching.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/21-data-fetching-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/22-data-fetching-pre-rendering.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/23-data-fetching-two-forms.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/24-data-fetching-with-data.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/25-data-fetching-implement-getstaticprops.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/26-data-fetching-getstaticprops-details.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/27-data-fetching-request-time.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/28-dynamic-routes.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/29-dynamic-routes-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/30-dynamic-routes-page-path-external-data.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/31-dynamic-routes-implement-getstaticpaths.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/32-dynamic-routes-implement-getstaticprops.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/33-dynamic-routes-render-markdown.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/34-dynamic-routes-polishing-post-page.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/35-dynamic-routes-polishing-index-page.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/36-dynamic-routes-dynamic-routes-details.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/37-api-routes.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/38-api-routes-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/39-api-routes-creating-api-routes.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/40-api-routes-api-routes-details.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/41-deploying-nextjs-app.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/42-deploying-nextjs-app-setup.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/43-deploying-nextjs-app-github.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/44-deploying-nextjs-app-deploy.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/45-deploying-nextjs-app-platform-details.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/46-deploying-nextjs-app-other-hosting-options.mdx create mode 100644 apps/docs/content/de/learn/03-pages-router/index.mdx create mode 100644 apps/docs/content/de/learn/04-seo/01-importance-of-seo.mdx create mode 100644 apps/docs/content/de/learn/04-seo/02-search-systems.mdx create mode 100644 apps/docs/content/de/learn/04-seo/03-webcrawlers.mdx create mode 100644 apps/docs/content/de/learn/04-seo/04-crawling-and-indexing.mdx create mode 100644 apps/docs/content/de/learn/04-seo/05-status-codes.mdx create mode 100644 apps/docs/content/de/learn/04-seo/06-robots-txt.mdx create mode 100644 apps/docs/content/de/learn/04-seo/07-xml-sitemaps.mdx create mode 100644 apps/docs/content/de/learn/04-seo/08-metatags.mdx create mode 100644 apps/docs/content/de/learn/04-seo/09-canonical.mdx create mode 100644 apps/docs/content/de/learn/04-seo/10-rendering-and-ranking.mdx create mode 100644 apps/docs/content/de/learn/04-seo/11-rendering-strategies.mdx create mode 100644 apps/docs/content/de/learn/04-seo/12-amp.mdx create mode 100644 apps/docs/content/de/learn/04-seo/13-url-structure.mdx create mode 100644 apps/docs/content/de/learn/04-seo/14-metadata.mdx create mode 100644 apps/docs/content/de/learn/04-seo/15-on-page-seo.mdx create mode 100644 apps/docs/content/de/learn/04-seo/16-web-performance.mdx create mode 100644 apps/docs/content/de/learn/04-seo/17-vitals-overview.mdx create mode 100644 apps/docs/content/de/learn/04-seo/18-lcp.mdx create mode 100644 apps/docs/content/de/learn/04-seo/19-fid.mdx create mode 100644 apps/docs/content/de/learn/04-seo/20-cls.mdx create mode 100644 apps/docs/content/de/learn/04-seo/21-seo-impact.mdx create mode 100644 apps/docs/content/de/learn/04-seo/22-improve.mdx create mode 100644 apps/docs/content/de/learn/04-seo/23-lighthouse.mdx create mode 100644 apps/docs/content/de/learn/04-seo/24-images.mdx create mode 100644 apps/docs/content/de/learn/04-seo/25-dynamic-imports.mdx create mode 100644 apps/docs/content/de/learn/04-seo/26-dynamic-import-components.mdx create mode 100644 apps/docs/content/de/learn/04-seo/27-fonts.mdx create mode 100644 apps/docs/content/de/learn/04-seo/28-third-party-scripts.mdx create mode 100644 apps/docs/content/de/learn/04-seo/29-monitor.mdx create mode 100644 apps/docs/content/de/learn/04-seo/30-nextjs-speed-insights.mdx create mode 100644 apps/docs/content/de/learn/04-seo/31-custom-reporting.mdx create mode 100644 apps/docs/content/de/learn/04-seo/32-other-tools.mdx create mode 100644 apps/docs/content/de/learn/04-seo/33-data-studio.mdx create mode 100644 apps/docs/content/de/learn/04-seo/index.mdx diff --git a/apps/docs/content/de/blog/building-apis-with-nextjs.mdx b/apps/docs/content/de/blog/building-apis-with-nextjs.mdx new file mode 100644 index 00000000..7e2b154b --- /dev/null +++ b/apps/docs/content/de/blog/building-apis-with-nextjs.mdx @@ -0,0 +1,396 @@ +--- +source-updated-at: 2025-05-29T18:05:49.001Z +translation-updated-at: 2025-06-02T19:42:53.989Z +title: APIs mit Next.js erstellen +description: Erfahren Sie, wie Sie APIs mit Next.js aufbauen können. +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 +--- + +Diese Anleitung erklärt, wie Sie APIs mit Next.js erstellen können, einschließlich der Projekteinrichtung, dem Verständnis des App Routers und Route Handlern, der Handhabung mehrerer HTTP-Methoden, der Implementierung dynamischer Routen, der Erstellung wiederverwendbarer Middleware-Logik und der Entscheidung, wann eine dedizierte API-Ebene benötigt wird. + +* [1\. Erste Schritte](#1-erste-schritte) + * [1.1 Next.js-App erstellen](#11-nextjs-app-erstellen) + * [1.2 App Router vs. Pages Router](#12-app-router-vs-pages-router) +* [2\. Warum (und wann) APIs mit Next.js erstellen?](#2-warum-und-wann-apis-mit-nextjs-erstellen) +* [3\. Erstellen einer API mit Route Handlern](#3-erstellen-einer-api-mit-route-handlern) + * [3.1 Grundlegende Dateistruktur](#31-grundlegende-dateistruktur) + * [3.2 Mehrere HTTP-Methoden in einer Datei](#32-mehrere-http-methoden-in-einer-datei) +* [4\. Arbeiten mit Web-APIs](#4-arbeiten-mit-web-apis) + * [4.1 Direkte Verwendung von Request & Response](#41-direkte-verwendung-von-request--response) + * [4.2 Abfrageparameter](#42-abfrageparameter) + * [4.3 Header und Cookies](#43-header-und-cookies) +* [5\. Dynamische Routen](#5-dynamische-routen) +* [6\. Next.js als Proxy oder Weiterleitungsebene nutzen](#6-nextjs-als-proxy-oder-weiterleitungsebene-nutzen) +* [7\. Gemeinsame "Middleware"-Logik erstellen](#7-gemeinsame-middleware-logik-erstellen) +* [8\. Bereitstellung und "SPA-Mode"-Überlegungen](#8-bereitstellung-und-spa-mode-ueberlegungen) + * [8.1 Standard-Node.js-Bereitstellung](#81-standard-nodejs-bereitstellung) + * [8.2 SPA/Statischer Export](#82-spastatischer-export) + * [8.3 Bereitstellung von APIs auf Vercel](#83-bereitstellung-von-apis-auf-vercel) +* [9\. Wann auf die Erstellung eines API-Endpunkts verzichtet werden sollte](#9-wann-auf-die-erstellung-eines-api-endpunkts-verzichtet-werden-sollte) +* [10\. Alles zusammenfügen](#10-alles-zusammenfuegen) +* [Fazit](#fazit) +* [Häufig gestellte Fragen](#haeufig-gestellte-fragen) + * [Was ist mit Server Actions?](#was-ist-mit-server-actions) + * [Kann ich TypeScript mit Route Handlern verwenden?](#kann-ich-typescript-mit-route-handlern-verwenden) + * [Was sind die Best Practices für Authentifizierung?](#was-sind-die-best-practices-fuer-authentifizierung) + +[1\. Erste Schritte](#1-erste-schritte) +----------------------------------------- + +### [1.1 Next.js-App erstellen](#11-nextjs-app-erstellen) + +Wenn Sie neu beginnen, können Sie ein neues Next.js-Projekt mit folgendem Befehl erstellen: + +```bash filename="Terminal" +npx create-next-app@latest --api +``` + +> **Hinweis:** Das Flag `--api` fügt automatisch eine Beispiel-`route.ts` im `app/`-Ordner Ihres neuen Projekts hinzu, die zeigt, wie ein API-Endpunkt erstellt wird. + +### [1.2 App Router vs. Pages Router](#12-app-router-vs-pages-router) + +* **Pages Router**: Historisch gesehen nutzte Next.js `pages/api/*` für APIs. Dieser Ansatz basierte auf Node.js-Request/Response-Objekten und einer Express-ähnlichen API. +* **App Router (Standard)**: Eingeführt in Next.js 13, nutzt der App Router vollständig die Web-Standard-Request/Response-APIs. Anstelle von `pages/api/*` können Sie nun `route.ts` oder `route.js`-Dateien überall im `app/`-Verzeichnis platzieren. + +> **Warum wechseln?** Die "Route Handler" des App Routers basieren auf den [Web Platform Request/Response APIs](https://developer.mozilla.org/en-US/docs/Web/API) anstelle von Node.js-spezifischen APIs. Dies vereinfacht das Lernen, reduziert Reibung und hilft, Wissen über verschiedene Tools hinweg wiederzuverwenden. + +[2\. Warum (und wann) APIs mit Next.js erstellen?](#2-warum-und-wann-apis-mit-nextjs-erstellen) +------------------------------------------------------------------------------------------ + +1. **Öffentliche API für mehrere Clients** + + * Sie können eine öffentliche API erstellen, die von Ihrer Next.js-Web-App, einer separaten Mobile-App oder einem Drittanbieterdienst genutzt wird. Beispielsweise könnten Sie `/api/users` sowohl in Ihrer React-Website als auch in einer React Native-Mobile-App abfragen. +2. **Proxy zu einem bestehenden Backend** + + * Manchmal möchten Sie externe [Microservices](https://vercel.com/blog/how-vercel-adopted-microfrontends) hinter einem einzigen Endpunkt verbergen oder konsolidieren. Next.js Route Handler können als Proxy oder Mittelschicht zu einem bestehenden Backend fungieren. Beispielsweise könnten Sie Anfragen abfangen, Authentifizierung handhaben, Daten transformieren und die Anfrage dann an eine Upstream-API weiterleiten. +3. **Webhooks und Integrationen** + + * Wenn Sie externe Rückrufe oder Webhooks erhalten (z.B. von Stripe, GitHub, Twilio), können Sie diese mit Route Handlern verarbeiten. +4. **Benutzerdefinierte Authentifizierung** + + * Wenn Sie Sessions, Tokens oder andere Authentifizierungslogik benötigen, können Sie Cookies speichern, Header lesen und mit den entsprechenden Daten in Ihrer Next.js-API-Ebene antworten. + +> **Hinweis:** Wenn Sie nur serverseitiges Daten-Fetching für Ihre eigene Next.js-App benötigen (und diese Daten nicht extern teilen müssen), könnten Server Components ausreichen, um Daten direkt während des Renderns abzurufen – keine separate API-Ebene ist erforderlich. + +[3\. Erstellen einer API mit Route Handlern](#3-erstellen-einer-api-mit-route-handlern) +--------------------------------------------------------------------------------- + +### [3.1 Grundlegende Dateistruktur](#31-grundlegende-dateistruktur) + +Im App Router (`app/`) erstellen Sie einen Ordner, der Ihre Route repräsentiert, und darin eine `route.ts`-Datei. + +Beispiel für einen Endpunkt unter `/api/users`: + +``` +app +└── api + └── users + └── route.ts +``` + +### [3.2 Mehrere HTTP-Methoden in einer Datei](#32-mehrere-http-methoden-in-einer-datei) + +Anders als bei den API-Routen des Pages Routers (die einen einzelnen Standard-Export hatten), können Sie mehrere Funktionen exportieren, die verschiedene HTTP-Methoden aus derselben Datei repräsentieren. + +```ts filename="app/api/users/route.ts" +export async function GET(request: Request) { + // Beispiel: Daten aus Ihrer DB abrufen + 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) { + // Request-Body parsen + const body = await request.json(); + const { name } = body; + + // z.B. Neuen Benutzer in DB einfügen + const newUser = { id: Date.now(), name }; + + return new Response(JSON.stringify(newUser), { + status: 201, + headers: { 'Content-Type': 'application/json' } + }); +} +``` + +Nun gibt eine GET-Anfrage an `/api/users` Ihre Benutzerliste zurück, während eine `POST`-Anfrage an dieselbe URL einen neuen Benutzer einfügt. + +[4\. Arbeiten mit Web-APIs](#4-arbeiten-mit-web-apis) +----------------------------------------------------- + +### [4.1 Direkte Verwendung von Request & Response](#41-direkte-verwendung-von-request--response) + +Standardmäßig erhalten Ihre Route Handler-Methoden (`GET`, `POST`, etc.) ein standardmäßiges [Request](https://developer.mozilla.org/docs/Web/API/Request)-Objekt, und Sie müssen ein standardmäßiges [Response](https://developer.mozilla.org/docs/Web/API/Response)-Objekt zurückgeben. + +### [4.2 Abfrageparameter](#42-abfrageparameter) + +```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'); // z.B. `/api/search?query=hello` + + return new Response( + JSON.stringify({ result: `Sie haben nach folgendem gesucht: ${query}` }), + { + headers: { 'Content-Type': 'application/json' }, + }, + ); +} +``` + +### [4.3 Header und Cookies](#43-header-und-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. Verwendung der 'next/headers'-Helfer + const cookieStore = await cookies(); + const token = cookieStore.get('token'); + + const headersList = await headers(); + const referer = headersList.get('referer'); + + // 2. Verwendung der standardmäßigen Web-APIs + const userAgent = request.headers.get('user-agent'); + + return new Response(JSON.stringify({ token, referer, userAgent }), { + headers: { 'Content-Type': 'application/json' }, + }); +} +``` + +Die Funktionen `cookies()` und `headers()` können hilfreich sein, wenn Sie gemeinsame Logik über anderen serverseitigen Code in Next.js wiederverwenden möchten. Sie werden feststellen, dass Next.js auch `NextRequest` und `NextResponse` bereitstellt, die die Basis-Web-APIs erweitern. + +[5\. Dynamische Routen](#5-dynamische-routen) +--------------------------------------- + +Um dynamische Pfade zu erstellen (z.B. `/api/users/:id`), verwenden Sie **Dynamische Segmente** in Ihrer Ordnerstruktur: + +``` +app +└── api + └── users + └── [id] + └── route.ts +``` + +Diese Datei entspricht einer URL wie `/api/users/123`, wobei `123` als Parameter erfasst wird. + +```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; + // z.B. Abfrage einer Datenbank nach Benutzer mit ID `id` + return new Response(JSON.stringify({ id, name: `Benutzer ${id}` }), { + status: 200, + headers: { 'Content-Type': 'application/json' }, + }); +} + +export async function DELETE( + request: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) { + const id = (await params).id; + // z.B. Benutzer mit ID `id` in DB löschen + return new Response(null, { status: 204 }); +} +``` + +Hier gibt `params.id` Ihnen das dynamische Segment. + +[6\. Next.js als Proxy oder Weiterleitungsebene nutzen](#6-nextjs-als-proxy-oder-weiterleitungsebene-nutzen) +-------------------------------------------------------------------------------------------------- + +Ein häufiges Szenario ist das **Proxying** eines bestehenden Backend-Dienstes. Sie können Anfragen authentifizieren, Logging handhaben oder Daten transformieren, bevor sie an einen entfernten Server oder ein Backend gesendet werden: + +```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', { + // Optional: Weiterleitung einiger Header, Hinzufügen von Auth-Tokens, etc. + headers: { Authorization: `Bearer ${process.env.API_TOKEN}` }, + }); + + // Antwort transformieren oder weiterleiten + const data = await response.json(); + const transformed = { ...data, source: 'proxied-through-nextjs' }; + + return new Response(JSON.stringify(transformed), { + headers: { 'Content-Type': 'application/json' }, + }); +} +``` + +Nun müssen Ihre Clients nur `/api/external` aufrufen, und Next.js übernimmt den Rest. Dies wird manchmal auch als "Backend for Frontend" oder BFF bezeichnet. + +[7\. Gemeinsame "Middleware"-Logik erstellen](#7-gemeinsame-middleware-logik-erstellen) +----------------------------------------------------------------------------- + +Wenn Sie dieselbe Logik (z.B. Authentifizierungsprüfungen, Logging) über mehrere Route Handler anwenden möchten, können Sie wiederverwendbare Funktionen erstellen, die Ihre Handler wrappen: + +```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: 'Nicht autorisiert' }), { + status: 401, + headers: { 'Content-Type': 'application/json' }, + }); + } + + // Wenn authentifiziert, den ursprünglichen Handler aufrufen + return handler(req, context); + }; +} +``` + +Dann in Ihrem 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: 'Hier gibt es Drachen' }), { + headers: { 'Content-Type': 'application/json' }, + }); +} + +export const GET = withAuth(secretGET); +``` + +[8\. Bereitstellung und "SPA-Mode"-Überlegungen](#8-bereitstellung-und-spa-mode-ueberlegungen) +----------------------------------------------------------------------------------------- + +### [8.1 Standard-Node.js-Bereitstellung](#81-standard-nodejs-bereitstellung) + +Die standardmäßige Next.js-Server-Bereitstellung mit `next start` ermöglicht Ihnen die Nutzung von Funktionen wie Route Handlern, Server Components, Middleware und mehr – während Sie dynamische, anfragezeitabhängige Informationen nutzen können. + +Es ist keine zusätzliche Konfiguration erforderlich. Weitere Details finden Sie unter [Bereitstellung](/docs/app/building-your-application/deploying). + +### [8.2 SPA/Statischer Export](#82-spastatischer-export) + +Next.js unterstützt auch die Ausgabe Ihrer gesamten Seite als [statische Single-Page Application (SPA)](/docs/app/building-your-application/upgrading/single-page-applications). + +Sie können dies aktivieren, indem Sie folgendes setzen: + +```ts filename="next.config.ts" +import type { NextConfig } from 'next'; + +const nextConfig: NextConfig = { + output: 'export', +}; + +export default nextConfig; +``` + +Im **statischen Export-Modus** generiert Next.js rein statisches HTML, CSS und JS. **Sie können keinen serverseitigen Code ausführen** (wie API-Endpunkte). Wenn Sie dennoch eine API benötigen, müssten Sie diese separat hosten (z.B. einen eigenständigen Node.js-Server). + +> **Hinweis:** +> +> * **GET Route Handler** [können statisch exportiert werden](/docs/app/building-your-application/deploying/static-exports#route-handlers), wenn sie nicht auf dynamische Anfragedaten angewiesen sind. Sie werden zu statischen Dateien in Ihrem `out`-Ordner. +> * **Alle anderen Server-Funktionen** (dynamische Anfragen, Cookies umschreiben, etc.) werden in einem reinen SPA-Export **nicht** unterstützt. + +### [8.3 Bereitstellung von APIs auf Vercel](#83-deploying-apis-on-vercel) + +Wenn Sie Ihre Next.js-Anwendung auf Vercel bereitstellen, haben wir eine [Anleitung zur Bereitstellung von APIs](https://vercel.com/guides/hosting-backend-apis). Diese umfasst weitere Vercel-Funktionen wie [programmatische Ratenbegrenzung (Rate-Limiting)](https://vercel.com/docs/security/vercel-waf/rate-limiting-sdk) über die Vercel Firewall. Vercel bietet auch [Cron-Jobs](https://vercel.com/docs/cron-jobs/manage-cron-jobs), die häufig bei API-Ansätzen benötigt werden. + +[9\. Wann Sie auf die Erstellung eines API-Endpunkts verzichten können](#9-when-to-skip-creating-an-api-endpoint) +---------------------------------------------------------------------------------------------------------------- + +Mit den **React Server Components** des App Routers können Sie Daten direkt auf dem Server abrufen, ohne einen öffentlichen Endpunkt freizugeben: + +```tsx filename="app/users/page.tsx" +// (Server Component) +export default async function UsersPage() { + // Dieser Fetch läuft auf dem Server (hier wird kein Client-seitiger Code benötigt) + const res = await fetch('https://api.example.com/users'); + const data = await res.json(); + + return ( +
+

Benutzer

+
    + {data.map((user: any) => ( +
  • {user.name}
    • + ))} +
+
+ ); +} +``` + +Wenn Ihre Daten nur innerhalb Ihrer Next.js-App verwendet werden, benötigen Sie möglicherweise überhaupt keine öffentliche API. + +[10\. Alles zusammenfügen](#10-putting-it-all-together) +------------------------------------------------------- + +1. **Erstellen Sie ein neues Next.js-Projekt**: `npx create-next-app@latest --api`. +2. **Fügen Sie Route Handler** im Verzeichnis `app/` hinzu (z.B. `app/api/users/route.ts`). +3. **Exportieren Sie HTTP-Methoden** (`GET`, `POST`, `PUT`, `DELETE`, etc.) in derselben Datei. +4. **Verwenden Sie Web-Standard-APIs**, um mit dem `Request`-Objekt zu interagieren und eine `Response` zurückzugeben. +5. **Erstellen Sie eine öffentliche API**, wenn andere Clients Ihre Daten nutzen sollen oder um einen Backend-Service zu proxen. +6. **Rufen Sie** Ihre neuen API-Routen vom Client ab (z.B. innerhalb einer Client Component oder mit `fetch('/api/...')`). +7. Oder **verzichten Sie ganz auf die Erstellung einer API**, wenn eine Server Component einfach Daten abrufen kann. +8. **Fügen Sie ein gemeinsames "Middleware"-Muster** hinzu (z.B. `withAuth()`) für Authentifizierung oder andere wiederkehrende Logik. +9. **Stellen Sie** in einer Node.js-fähigen Umgebung für Server-Funktionen bereit oder **exportieren Sie** statisch, wenn Sie nur eine statische SPA benötigen. + +[Fazit](#conclusion) +-------------------- + +Die Verwendung des **App Routers** und der **Route Handler** in Next.js bietet Ihnen eine flexible, moderne Möglichkeit, APIs zu erstellen, die direkt die **Web-Plattform** nutzen. Sie können: + +* **Eine vollständige öffentliche API erstellen**, die von Web-, Mobile- oder Drittanbieter-Clients genutzt werden kann. +* **Aufrufe an bestehende externe Services proxen** und anpassen. +* **Eine wiederverwendbare "Middleware"-Schicht** für Authentifizierung, Protokollierung oder andere wiederkehrende Logik implementieren. +* **Anfragen dynamisch routen**, indem Sie die `[id]`-Segment-Ordnerstruktur verwenden. + +[Häufig gestellte Fragen](#frequently-asked-questions) +----------------------------------------------------- + +### [Was ist mit Server Actions?](#what-about-server-actions) + +Sie können sich [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) wie automatisch generierte `POST`-API-Routen vorstellen, die vom Client aufgerufen werden können. + +Sie sind für Mutationsoperationen wie das Erstellen, Aktualisieren oder Löschen von Daten konzipiert. Sie rufen eine Server Action wie eine normale JavaScript-Funktion auf, anstatt explizit einen `fetch` an eine definierte API-Route durchzuführen. + +Obwohl dabei _trotzdem_ eine Netzwerkanfrage stattfindet, müssen Sie diese nicht explizit verwalten. Der URL-Pfad wird automatisch generiert und [verschlüsselt](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#security), sodass Sie nicht manuell auf eine Route wie `/api/users` im Browser zugreifen können. + +Wenn Sie Server Actions _und_ eine öffentliche API verwenden möchten, empfehlen wir, die Kernlogik in eine [Data Access Layer (Datenzugriffsschicht)](/blog/security-nextjs-server-components-actions) auszulagern und dieselbe Logik sowohl von der Server Action als auch von der API-Route aufzurufen. + +### [Kann ich TypeScript mit Route Handlern verwenden?](#can-i-use-typescript-with-route-handlers) + +Ja, Sie können TypeScript mit Route Handlern verwenden. Definieren Sie beispielsweise die Typen `Request` und `Response` in Ihrer `route`-Datei. + +Erfahren Sie mehr über [TypeScript mit Next.js](/docs/app/api-reference/config/typescript). + +### [Was sind die Best Practices für Authentifizierung?](#what-are-the-best-practices-for-authentication) + +Weitere Informationen finden Sie in unserer [Authentifizierungsdokumentation](/docs/app/building-your-application/authentication). diff --git a/apps/docs/content/de/blog/composable-caching.mdx b/apps/docs/content/de/blog/composable-caching.mdx new file mode 100644 index 00000000..a89a8878 --- /dev/null +++ b/apps/docs/content/de/blog/composable-caching.mdx @@ -0,0 +1,202 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:41:09.285Z +title: Komponierbares Caching mit Next.js +description: Erfahren Sie mehr über das API-Design und die Vorteile von '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 +--- + +Wir arbeiten an einem einfachen und leistungsstarken Caching-Modell für Next.js. In einem früheren Beitrag haben wir über [unsere Reise mit Caching](/blog/our-journey-with-caching) gesprochen und wie wir zur `'use cache'`-Direktive gekommen sind. + +Dieser Beitrag behandelt das API-Design und die Vorteile von `'use cache'`. + +[Was ist `'use cache'`?](#was-ist-use-cache) +-------------------------------------------- + +`'use cache'` macht Ihre Anwendung schneller, indem Daten oder Komponenten nach Bedarf zwischengespeichert werden. + +Es handelt sich um eine JavaScript-"Direktive" – ein String-Literal, das Sie Ihrem Code hinzufügen – das dem Next.js-Compiler signalisiert, eine andere "Boundary" zu betreten. Zum Beispiel vom Server zum Client. + +Dies ist ein ähnliches Konzept wie React-Direktiven wie `'use client'` und `'use server'`. Direktiven sind Compiler-Anweisungen, die festlegen, wo Code ausgeführt werden soll, sodass das Framework einzelne Teile für Sie optimieren und orchestrieren kann. + +[Wie funktioniert es?](#wie-funktioniert-es) +-------------------------------------------- + +Beginnen wir mit einem einfachen Beispiel: + +``` +async function getUser(id) { + 'use cache'; + let res = await fetch(`https://api.vercel.app/user/${id}`); + return res.json(); +} +``` + +Hinter den Kulissen transformiert Next.js diesen Code aufgrund der `'use cache'`-Direktive in eine Serverfunktion. Während der Kompilierung werden die "Abhängigkeiten" dieses Cache-Eintrags ermittelt und als Teil des Cache-Schlüssels verwendet. + +Zum Beispiel wird `id` Teil des Cache-Schlüssels. Wenn wir `getUser(1)` mehrmals aufrufen, geben wir die zwischengespeicherte Ausgabe der Serverfunktion zurück. Eine Änderung dieses Werts erstellt einen neuen Eintrag im Cache. + +Betrachten wir ein Beispiel mit der zwischengespeicherten Funktion in einer Serverkomponente mit einem [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 ; +} +``` + +Dieses Beispiel ist schwieriger. Können Sie alle Abhängigkeiten erkennen, die Teil des Cache-Schlüssels sein müssen? + +Die Argumente `index` und `limit` sind offensichtlich – wenn sich diese Werte ändern, wählen wir einen anderen Ausschnitt der Benachrichtigungen aus. Aber was ist mit der Benutzer-`id`? Ihr Wert kommt von der Elternkomponente. + +Der Compiler versteht, dass `getNotifications` auch von `id` abhängt, und ihr Wert wird automatisch in den Cache-Schlüssel aufgenommen. Dies verhindert eine ganze Kategorie von Caching-Problemen durch fehlerhafte oder fehlende Abhängigkeiten im Cache-Schlüssel. + +[Warum nicht eine Cache-Funktion verwenden?](#warum-nicht-eine-cache-funktion-verwenden) +-------------------------------------------------------------------------------------- + +Betrachten wir das letzte Beispiel noch einmal. Könnten wir stattdessen eine `cache()`-Funktion anstelle einer Direktive verwenden? + +``` +function Profile({ id }) { + async function getNotifications(index, limit) { + return await cache(async () => { + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + // Hoppla! Wo fügen wir id in den Cache-Schlüssel ein? + .where(eq(notifications.userId, id)); + }); + } + + return ; +} +``` + +Eine `cache()`-Funktion könnte nicht in das Closure schauen und erkennen, dass der `id`-Wert Teil des Cache-Schlüssels sein sollte. Sie müssten manuell angeben, dass `id` Teil Ihres Schlüssels ist. Wenn Sie das vergessen oder falsch machen, riskieren Sie Cache-Kollisionen oder veraltete Daten. + +Closures können alle möglichen lokalen Variablen erfassen. Ein naiver Ansatz könnte versehentlich Variablen einbeziehen (oder auslassen), die Sie nicht beabsichtigt haben. Das kann dazu führen, dass falsche Daten zwischengespeichert werden, oder es könnte Cache-Poisoning riskieren, wenn sensible Informationen in den Cache-Schlüssel gelangen. + +`'use cache'` gibt dem Compiler genug Kontext, um Closures sicher zu behandeln und Cache-Schlüssel korrekt zu generieren. Eine reine Laufzeitlösung wie `cache()` würde erfordern, dass Sie alles manuell erledigen – und es ist leicht, Fehler zu machen. Im Gegensatz dazu kann eine Direktive statisch analysiert werden, um alle Ihre Abhängigkeiten zuverlässig im Hintergrund zu behandeln. + +[Wie werden nicht serialisierbare Eingabewerte behandelt?](#wie-werden-nicht-serialisierbare-eingabewerte-behandelt) +-------------------------------------------------------------------------------------------------------------------- + +Wir haben zwei verschiedene Arten von Eingabewerten für das Caching: + +* **Serialisierbar**: Hier bedeutet "serialisierbar", dass eine Eingabe in ein stabiles, stringbasiertes Format umgewandelt werden kann, _ohne_ ihre Bedeutung zu verlieren. Während viele zuerst an `JSON.stringify` denken, verwenden wir tatsächlich die Serialisierung von React (z.B. über Server Components), um eine breitere Palette von Eingaben zu behandeln – einschließlich Promises, zirkulärer Datenstrukturen und anderer komplexer Objekte. Dies geht über das hinaus, was einfaches JSON leisten kann. +* **Nicht serialisierbar**: Diese Eingaben sind nicht Teil des Cache-Schlüssels. Wenn wir versuchen, diese Werte zwischenzuspeichern, geben wir eine Server-"Referenz" zurück. Diese Referenz wird dann von Next.js verwendet, um den ursprünglichen Wert zur Laufzeit wiederherzustellen. + +Angenommen, wir hätten daran gedacht, `id` in den Cache-Schlüssel aufzunehmen: + +``` +await cache(async () => { + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + .where(eq(notifications.userId, id)); +}, [id, index, limit]); +``` + +Dies funktioniert, wenn die Eingabewerte serialisiert werden können. Aber wenn `id` ein React-Element oder ein komplexerer Wert wäre, müssten wir die Eingabeschlüssel manuell serialisieren. Betrachten Sie eine Serverkomponente, die den aktuellen Benutzer basierend auf einer `id`-Prop abruft: + +``` +async function Profile({ id, children }) { + 'use cache'; + const user = await getUser(id); + + return ( + <> +

{user.name}

+ {/* Änderungen an children brechen den Cache nicht... warum? */} + {children} + + ); +} +``` + +Lassen Sie uns Schritt für Schritt durchgehen, wie dies funktioniert: + +1. Während der Kompilierung sieht Next.js die `'use cache'`-Direktive und transformiert den Code, um eine spezielle Serverfunktion zu erstellen, die Caching unterstützt. Während der Kompilierung findet kein Caching statt, sondern Next.js richtet den Mechanismus für das Laufzeit-Caching ein. +2. Wenn Ihr Code die "Cache-Funktion" aufruft, serialisiert Next.js die Argumente der Funktion. Alles, was nicht direkt serialisierbar ist, wie JSX, wird durch einen "Referenz"-Platzhalter ersetzt. +3. Next.js prüft, ob ein zwischengespeichertes Ergebnis für die serialisierten Argumente existiert. Wenn kein Ergebnis gefunden wird, berechnet die Funktion den neuen Wert zum Zwischenspeichern. +4. Nachdem die Funktion fertig ist, wird der Rückgabewert serialisiert. Nicht serialisierbare Teile des Rückgabewerts werden wieder in Referenzen umgewandelt. +5. Der Code, der die Cache-Funktion aufgerufen hat, deserialisiert die Ausgabe und wertet die Referenzen aus. Dies ermöglicht Next.js, die Referenzen durch ihre tatsächlichen Objekte oder Werte zu ersetzen, was bedeutet, dass nicht serialisierbare Eingaben wie `children` ihre ursprünglichen, nicht zwischengespeicherten Werte behalten können. + +Dies bedeutet, dass wir sicher _nur_ die ``-Komponente zwischenspeichern können und nicht die Kinder. Bei nachfolgenden Rendern wird `getUser()` nicht erneut aufgerufen. Der Wert von `children` könnte dynamisch sein oder ein separat zwischengespeichertes Element mit einer anderen Cache-Lebensdauer. Dies ist komponierbares Caching. + +[Das kommt mir bekannt vor...](#das-kommt-mir-bekannt-vor) +---------------------------------------------------------- + +Wenn Sie denken "das fühlt sich an wie das gleiche Modell der Server- und Client-Komposition" – haben Sie absolut recht. Dies wird manchmal als "Donut"-Muster bezeichnet: + +* Der **äußere** Teil des Donuts ist eine Serverkomponente, die Datenabruf oder aufwändige Logik handhabt. +* Das **Loch** in der Mitte ist eine Kindkomponente, die möglicherweise einige Interaktivitäten aufweist + +```tsx filename="app/page.tsx" +export default function Page() { + return ( + + {/* Erstelle ein Loch zum Client */} + + + ); +} +``` + +`'use cache'` ist das Gleiche. Der Donut ist der zwischengespeicherte Wert der äußeren Komponente und das Loch sind die Referenzen, die zur Laufzeit ausgefüllt werden. Deshalb führt eine Änderung von `children` nicht zur Invalidierung des gesamten zwischengespeicherten Outputs. Die Kinder sind nur einige Referenzen, die später ausgefüllt werden. + +[Was ist mit Tagging und Invalidierung?](#was-ist-mit-tagging-und-invalidierung) +-------------------------------------------------------------------------------- + +Sie können die Lebensdauer des Caches mit verschiedenen [Profilen](/docs/app/api-reference/functions/cacheLife) definieren. Wir beinhalten eine Reihe von Standardprofilen, aber Sie können bei Bedarf auch eigene benutzerdefinierte Werte definieren. + +``` +async function getUser(id) { + 'use cache'; + cacheLife('hours'); + let res = await fetch(`https://api.vercel.app/user/${id}`); + return res.json(); +} +``` + +Um einen bestimmten Cache-Eintrag zu invalidieren, können Sie [den Cache taggen](/docs/app/api-reference/functions/cacheTag) und dann `revalidateTag()` aufrufen. Ein leistungsstarkes Muster ist, dass Sie den Cache _nach_ dem Abruf Ihrer Daten (z.B. von einem CMS) taggen können: + +``` +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; +} +``` + +[Einfach und leistungsstark](#einfach-und-leistungsstark) +---------------------------------------------------------- + +Unser Ziel mit `'use cache'` ist es, das Erstellen von Caching-Logik einfach _und_ leistungsstark zu machen. + +* **Einfach:** Sie können Cache-Einträge mit lokalem Denken erstellen. Sie müssen sich nicht um globale Nebenwirkungen kümmern, wie vergessene Cache-Schlüsseleinträge oder unbeabsichtigte Änderungen an anderen Teilen Ihres Codebasis. +* **Leistungsstark:** Sie können mehr als nur statisch analysierbaren Code zwischenspeichern. Zum Beispiel Werte, die sich zur Laufzeit ändern könnten, aber Sie trotzdem das Ergebnis nach der Auswertung zwischenspeichern möchten. + +`'use cache` ist in Next.js noch **experimentell**. Wir freuen uns über Ihr frühes Feedback, während Sie es testen. + +[Erfahren Sie mehr in der Dokumentation](/docs/app/api-reference/directives/use-cache). \ No newline at end of file diff --git a/apps/docs/content/de/blog/create-next-app.mdx b/apps/docs/content/de/blog/create-next-app.mdx new file mode 100644 index 00000000..d43efd42 --- /dev/null +++ b/apps/docs/content/de/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:32.145Z +title: Vorstellung von Create Next App +description: >- + Wir freuen uns, heute die neue Create Next App vorstellen zu dürfen. Create Next + App richtet eine moderne React-Anwendung mit Next.js-Unterstützung mit nur einem Befehl ein. +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 +--- + +Wir freuen uns, heute die neue Create Next App vorstellen zu dürfen. + +Create Next App richtet eine moderne React-Anwendung mit Next.js-Unterstützung mit nur einem Befehl ein. + +Um loszulegen, müssen Sie nur folgenden Befehl ausführen: + +```bash filename="Terminal" +npx create-next-app +``` + +Create Next App wurde von Grund auf neu entwickelt, um die bestmögliche Entwicklererfahrung zu bieten: + +* **Interaktive Erfahrung**: Die Ausführung von `npx create-next-app` (ohne Argumente) startet nun eine interaktive Oberfläche, die Sie durch die Projekteinrichtung führt. +* **Keine Abhängigkeiten**: Die Initialisierung eines Projekts dauert jetzt nur noch **eine Sekunde**. Create Next App hat keine Abhängigkeiten und installiert mit **nur 604 kB**. Vor unseren Optimierungen betrug die Größe der vorherigen Version **5,38 MB**. Das ist eine Reduzierung um mehr als **4,7 MB**! +* **Offline-Unterstützung**: Create Next App erkennt automatisch, wenn Sie offline sind, und initialisiert Ihr Projekt mit dem lokalen Paket-Cache. +* **Neue Standard-Projektvorlage**: Create Next App verwendet eine neue Projektvorlage, die für moderne Next.js-Anwendungen optimiert ist. Da Create Next App nun gemeinsam mit Next.js selbst gepflegt wird, ist diese Vorlage immer auf dem neuesten Stand der Next.js-Version! +* **Unterstützung für Beispiele**: Create Next App kann Ihre Anwendung mit einem Beispiel aus der [Next.js-Beispielsammlung](https://github.com/vercel/next.js/tree/canary/examples) initialisieren (z.B. `npx create-next-app --example api-routes`). +* **Getestet**: Das Paket ist Teil des Next.js-Monorepos und wird mit demselben Integrationstest-Suite wie Next.js selbst getestet, wodurch sichergestellt wird, dass es mit jeder Version wie erwartet funktioniert. + +Create Next App war zuvor ein [community-maintained](https://open.segment.com/create-next-app/) Projekt, aber wir fanden es wichtig, den ersten Eindruck von Next.js selbst zu gestalten. Besonders, da wir es in der [Next.js-Beispielsammlung](https://github.com/vercel/next.js/tree/canary/examples) empfehlen. + +Wir haben mit [Segment](https://segment.com/) zusammengearbeitet, um die Paketverwaltung zu übernehmen, und sind sehr dankbar für ihre bisherige Betreuung, insbesondere durch [Fouad Matin](https://twitter.com/fouadmatin). \ No newline at end of file diff --git a/apps/docs/content/de/blog/incremental-adoption.mdx b/apps/docs/content/de/blog/incremental-adoption.mdx new file mode 100644 index 00000000..97db673f --- /dev/null +++ b/apps/docs/content/de/blog/incremental-adoption.mdx @@ -0,0 +1,109 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:40:19.702Z +title: Next.js schrittweise einführen +description: >- + Lernen Sie verschiedene Strategien kennen, um Next.js schrittweise in Ihren Entwicklungsprozess zu integrieren. +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/) wurde für die schrittweise Einführung konzipiert. Mit Next.js können Sie Ihren bestehenden Code weiterverwenden und so viel (oder wenig) React hinzufügen, wie Sie benötigen. Indem Sie klein beginnen und nach und nach mehr Seiten hinzufügen, vermeiden Sie eine komplette Neuentwicklung, die Ihre Feature-Arbeit behindern könnte. + +Viele Unternehmen müssen ihren Tech-Stack modernisieren, um Kosten zu senken, die Produktivität der Entwickler zu steigern und ihren Kunden das beste Erlebnis zu bieten. Die komponentenbasierte Entwicklung hat die Bereitstellungsgeschwindigkeit und Wiederverwendbarkeit moderner Codebasen erheblich verbessert. + +Und mit über [8 Millionen Downloads/Monat](https://www.npmtrends.com/react) ist React die führende komponentenbasierte Wahl für Entwickler. Next.js, das React-Framework für die Produktion, ermöglicht es Ihnen, React schrittweise einzuführen. + +[Motivation](#motivation) +------------------------- + +In einer zunehmend mobilen Welt ist die Verbesserung und Überwachung Ihrer [Core Web Vitals](/analytics) entscheidend für den Erfolg. Ihre Kunden sind wahrscheinlich weltweit verteilt und haben unterschiedliche Internetgeschwindigkeiten. Jede zusätzliche Sekunde (oder Millisekunde), die auf das Laden einer Seite oder die Ausführung einer Aktion gewartet werden muss, kann den Unterschied zwischen einem Verkauf, einem Eindruck oder einer Konversion ausmachen. + +Wenn Sie Ihren Tech-Stack modernisieren, könnten Sie vor Herausforderungen stehen wie: + +* Ihre Anwendung hat Jahre alten Legacy-Code, der schwer zu verstehen ist und Jahre (und Millionen von Dollar) kosten würde, um ihn komplett neu zu schreiben. +* Ihre Ladezeiten nehmen weiter zu, während die Größe und Komplexität der Anwendung wächst. Einfache Marketing-Seiten sind genauso langsam wie die komplexesten Seiten. +* Sie versuchen, Ihr Entwicklungsteam zu vergrößern, stoßen aber auf Probleme, wenn Sie weitere Entwickler in die bestehende Codebasis einbinden wollen. +* Sie haben veraltete CI/CD- und DevOps-Prozesse, die die Produktivität der Entwickler verringern und es schwierig machen, neue Änderungen sicher und zuverlässig auszurollen. +* Ihre Anwendung ist nicht responsiv für mobile Geräte, und es ist unmöglich, das globale Seitenstyling zu aktualisieren, ohne andere Teile der Anwendung zu beschädigen. + +Sie wissen, dass Sie _etwas_ tun müssen, aber es kann überwältigend sein, zu verstehen, [wo Sie anfangen sollen](https://www.psychologytoday.com/us/blog/mindfully-present-fully-alive/201804/the-only-way-eat-elephant). Durch die schrittweise Einführung von Next.js können Sie beginnen, die oben genannten Probleme zu lösen und Ihre Anwendung zu transformieren. Lassen Sie uns einige verschiedene Strategien zur Einführung von Next.js in Ihren bestehenden Tech-Stack diskutieren. + +[Strategien](#strategien) +------------------------- + +### [Subpfad](#subpfad) + +Die erste Strategie besteht darin, Ihren Server oder Proxy so zu konfigurieren, dass alles unter einem bestimmten Subpfad auf eine Next.js-App verweist. Beispielsweise könnte Ihre bestehende Website unter `example.com` liegen, und Sie könnten Ihren Proxy so konfigurieren, dass `example.com/store` einen Next.js-E-Commerce-Store ausliefert. + +Mit [`basePath`](/docs/pages/api-reference/next-config-js/basePath) können Sie die Assets und Links Ihrer Next.js-Anwendung so konfigurieren, dass sie automatisch mit Ihrem neuen Subpfad `/store` funktionieren. Da jede Seite in Next.js ihre eigene [eigenständige Route](/docs/pages/building-your-application/routing) ist, werden Seiten wie `pages/products.js` in Ihrer Anwendung zu `example.com/store/products` geroutet. + +```js filename="next.config.js" +module.exports = { + basePath: '/store', +}; +``` + +Um mehr über `basePath` zu erfahren, lesen Sie unsere [Dokumentation](/docs/pages/api-reference/next-config-js/basePath). + +(**Hinweis:** Diese Funktion wurde in Next.js 9.5 und höher eingeführt. Wenn Sie ältere Versionen von Next.js verwenden, aktualisieren Sie bitte, bevor Sie sie ausprobieren.) + +### [Rewrites](#rewrites) + +Die zweite Strategie besteht darin, eine neue Next.js-App zu erstellen, die auf die Stamm-URL Ihrer Domain verweist. Dann können Sie [`rewrites`](/docs/pages/api-reference/next-config-js/rewrites) in `next.config.js` verwenden, um einige Subpfade an Ihre bestehende App zu proxien. + +Angenommen, Sie haben eine Next.js-App erstellt, die von `example.com` ausgeliefert werden soll, mit der folgenden `next.config.js`. Nun werden Anfragen für die Seiten, die Sie dieser Next.js-App hinzugefügt haben (z.B. `/about`, wenn Sie `pages/about.js` hinzugefügt haben), von Next.js verarbeitet, und Anfragen für jede andere Route (z.B. `/dashboard`) werden an `proxy.example.com` geproxied. + +```js filename="next.config.js" +module.exports = { + async rewrites() { + return [ + // wir müssen ein No-Op-Rewrite definieren, um die Überprüfung + // aller Seiten/statischen Dateien auszulösen, bevor wir versuchen zu proxien + { + source: '/:path*', + destination: '/:path*', + }, + { + source: '/:path*', + destination: `https://proxy.example.com/:path*`, + }, + ]; + }, +}; +``` + +Um mehr über Rewrites zu erfahren, lesen Sie unsere [Dokumentation](/docs/pages/api-reference/next-config-js/rewrites). + +### [Micro-Frontends mit Monorepos und Subdomains](#micro-frontends-mit-monorepos-und-subdomains) + +Next.js und [Vercel](https://vercel.com) machen es einfach, [Micro-Frontends](https://martinfowler.com/articles/micro-frontends.html) einzuführen und als [Monorepo](https://vercel.com/blog/monorepos) zu deployen. Dies ermöglicht es Ihnen, [Subdomains](https://de.wikipedia.org/wiki/Subdomain) zu verwenden, um neue Anwendungen schrittweise einzuführen. Einige Vorteile von Micro-Frontends: + +* Kleinere, kohärentere und wartbarere Codebasen. +* Skalierbarere Organisationen mit entkoppelten, autonomen Teams. +* Die Möglichkeit, Teile des Frontends auf inkrementelle Weise zu aktualisieren oder sogar neu zu schreiben. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/light-arch.png) + +> Die Architektur eines Monorepos, das auf Vercel deployed wird. + +Sobald Ihr Monorepo eingerichtet ist, pushen Sie Änderungen wie gewohnt in Ihr Git-Repository, und Sie werden sehen, wie die Commits in den mit Vercel verbundenen Projekten deployed werden. Verabschieden Sie sich von veralteten CI/CD-Prozessen. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/dark-comment.png) + +> Ein Beispiel für Deployment-URLs, die von einer Git-Integration bereitgestellt werden. + +[Fazit](#fazit) +------------------------- + +Next.js wurde für die schrittweise Einführung in Ihren bestehenden Tech-Stack entwickelt. Die Vercel-Plattform macht es zu einer kollaborativen Erfahrung mit Deploy-Previews für jede Codeänderung, indem sie nahtlos mit GitHub, GitLab und Bitbucket integriert. + +* Änderungen sofort lokal mit [Fast Refresh](/docs/architecture/fast-refresh) vorab anzeigen, um die Produktivität der Entwickler zu steigern. +* Pushen Sie Änderungen, um eine [Branch Preview](https://vercel.com/github) zu erstellen, die für die Zusammenarbeit mit Stakeholdern optimiert ist. +* Deployen Sie in die Produktion mit [Vercel](https://vercel.com) durch Mergen des PRs. Keine komplizierten DevOps. + +Um mehr zu erfahren, lesen Sie über [Subpfade](/docs/pages/api-reference/next-config-js/basePath) und [Rewrites](/docs/pages/api-reference/next-config-js/rewrites) oder [deployen Sie ein Beispiel mit 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/de/blog/june-2023-update.mdx b/apps/docs/content/de/blog/june-2023-update.mdx new file mode 100644 index 00000000..7df04dec --- /dev/null +++ b/apps/docs/content/de/blog/june-2023-update.mdx @@ -0,0 +1,147 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:40:57.094Z +title: Next.js App Router Update +description: >- + Das Next.js-Team konzentriert sich in den kommenden Monaten auf Leistung, Stabilität und Entwicklererfahrung. +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 +--- + +Der App Router stellt eine neue Grundlage für die Zukunft von Next.js dar, aber wir erkennen, dass es Möglichkeiten gibt, die Erfahrung zu verbessern. Wir möchten ein Update zu unseren aktuellen Prioritäten geben. + +Für die kommenden Releases von Next.js konzentrieren wir uns auf folgende Bereiche: + +* **Verbesserung der Leistung** +* **Verbesserung der Stabilität** +* **Verbesserung der Entwicklerbildung** + +[Der App Router](#the-app-router) +--------------------------------- + +Zunächst ist es hilfreich, etwas Kontext zur Gestaltung des App Routers zu geben. + +### [Über den Pages Router hinauswachsen durch Ausrichtung an React](#growing-beyond-the-pages-router-by-aligning-with-react) + +Mit zunehmender Verbreitung und größeren Anwendungen, die mit Next.js gebaut wurden, erhielten wir Feedback aus der Community und identifizierten Bereiche, in denen wir an die Grenzen des Pages Routers stießen. + +Besonders hervorzuheben ist, dass der Next.js Pages Router nicht für Streaming konzipiert war, eine grundlegende Funktion im modernen React, die uns hilft, die bestehenden Einschränkungen zu überwinden und unsere langfristige Vision für Next.js zu verwirklichen. + +Die Entwicklung von Streaming-freundlichen Framework-APIs für Datenabruf, Asset-Ladung und Seitenmetadaten sowie die Nutzung neuerer React-Primitive erforderten umfangreiche Änderungen an der Kernarchitektur von Next.js. + +Wir nutzten die Gelegenheit, auf den [neuesten React Concurrent Features](https://react.dev/blog/2023/05/03/react-canaries) aufzubauen, wie Server Components, Suspense und mehr, die für [Streaming-Architekturen entwickelt wurden](https://github.com/reactwg/react-18/discussions/37). + +### [Inkrementelle Adoption ist nicht verhandelbar](#incremental-adoption-is-non-negotiable) + +Wir wollten nicht, dass unsere Community ihre gesamten Anwendungen von Grund auf neu aufbauen muss, um auf die neueste Version von Next.js zu aktualisieren. Wir glauben, dass inkrementelle Adoption die beste Strategie für die schrittweise Entwicklung von Anwendungen ist. + +* **Inkrementelle Migration pro Route**: Ohne eine umfassende Neuentwicklung Ihrer Anwendung können Sie eine einzelne Route Ihrer Anwendung auf den App Router umstellen und neue Funktionen in Ihrem eigenen Tempo nutzen. Siehe unseren [Leitfaden zur inkrementellen Adoption](/docs/app/building-your-application/upgrading/app-router-migration) oder [sehen Sie sich ein Tutorial an](https://www.youtube.com/watch?v=YQMSietiFm0). +* **Einfaches Zurücksetzen**: Wenn Sie mit der Leistung oder Entwicklererfahrung des App Routers nicht zufrieden sind, können Sie problemlos für diese spezifische Route zum Pages Router zurückkehren. + +Wir untersuchen weitere Möglichkeiten, um die inkrementelle Adoption noch einfacher zu gestalten. + +### [Weg zur Stabilität](#road-to-stability) + +Wir begannen vor über einem Jahr mit dem Aufbau des Next.js App Routers und haben seitdem kontinuierlich neue Funktionen und Verbesserungen veröffentlicht. + +* **Erste Ankündigung**: Im Mai dieses Jahres veröffentlichten wir einen [RFC](/blog/layouts-rfc), um unsere Pläne für flexiblere Routing- und Layout-Optionen zu skizzieren. +* **Frühe Beta**: In Next.js 13 veröffentlichten wir die erste Version des App Routers, die es der Community ermöglichte, ihn auszuprobieren und frühzeitiges Feedback zu geben. +* **Stabile API**: Als Reaktion auf das Feedback konzentrierten wir uns darauf, die Kern-API fertigzustellen. In Version 13.4 erklärten wir die Kern-API des App Routers als stabil und bereit für eine breitere Nutzung. + +[Unser aktueller Fokus](#our-current-focus) +--------------------------------------- + +Die Markierung der Stabilität signalisierte der Community, dass die Kern-API festgelegt war und keine größeren Breaking Changes mehr durchlaufen würde, die Neuentwicklungen erfordern würden. + +Seitdem haben wir viel wertvolles Feedback erhalten, und die zunehmende Nutzung hat unweigerlich Bugs und Möglichkeiten für weitere Verbesserungen aufgedeckt. + +Wir möchten Ihnen mitteilen, dass wir **noch nicht zufrieden** mit der Nutzungserfahrung des App Routers sind und dies unsere oberste Priorität für die Zukunft ist. Lassen Sie uns also über die Arbeit sprechen, die wir leisten, um diese Erfahrung zu verbessern. + +### [Verbesserung der Leistung](#improving-performance) + +In den kommenden Monaten konzentrieren wir uns auf drei Aspekte der Leistung: lokale Iterationsgeschwindigkeit, Produktions-Build-Zeiten und Serverless-Leistung. + +#### [Leistung bei der lokalen Entwicklung](#local-development-performance) + +Da Next.js gereift ist und die Größe der damit gebauten Anwendungen gewachsen ist, haben wir schrittweise Teile der zugrunde liegenden Architektur durch schnellere, skalierbarere Tools ersetzt. + +* **Fortschritt der Migration**: Wir begannen mit dem Ersatz von Babel _(Kompilierung)_ und Terser _(Minifizierung)_ durch [SWC](/docs/architecture/nextjs-compiler). Dies hat dazu beigetragen, die lokale Iterationsgeschwindigkeit und die Produktions-Build-Zeiten zu verbessern. + +* **Langfristige Investition**: Eine hervorragende Fast-Refresh-Leistung unabhängig von der Größe der Anwendung zu erhalten, bedeutet, Next.js während der lokalen Entwicklung so inkrementell wie möglich zu gestalten, indem nur der benötigte Code gebündelt und kompiliert wird. + + Deshalb arbeiten wir derzeit daran, webpack _(Bündelung)_ durch [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) zu ersetzen, das auf einer Low-Level-Inkremental-Engine basiert, die Caching bis auf die Ebene einzelner Funktionen ermöglicht. + + Next.js-Anwendungen, die auf Turbopack umsteigen, werden auch bei wachsender Größe eine kontinuierliche Verbesserung der Fast-Refresh-Geschwindigkeit feststellen. + + In den letzten Monaten hat sich das Turbo-Team auf die Verbesserung der Turbopack-Leistung und die Unterstützung aller Next.js-Funktionen und App-Router-APIs konzentriert. + + Turbopack ist derzeit [als Beta verfügbar](/docs/architecture/turbopack) (`next dev --turbo`). + +* **Verbesserung der aktuellen Architektur**: Neben der Investition in die Zukunft arbeiten wir weiter an Leistungsverbesserungen für unsere bestehende webpack-Architektur. + + Bei bestimmten Next.js-Anwendungen, insbesondere solchen, die Tausende von Modulen aktualisieren, haben wir Berichte über Unzuverlässigkeiten bei der lokalen Entwicklung und Fast Refresh erhalten. Wir arbeiten daran, die Leistung und Zuverlässigkeit hier zu verbessern. Beispielsweise haben wir kürzlich vorkonfigurierte Einstellungen (`modularizeImports`) hinzugefügt, um [große Icon-Bibliotheken](https://github.com/vercel/next.js/pull/50900) zu handhaben, die versehentlich Tausende von Modulen bei jeder Anfrage neu laden könnten. + + +#### [Build-Zeit-Leistung](#build-time-performance) + +Wir arbeiten auch an Produktions-Builds mit Turbopack (`next build --turbo`) und haben [erste Teile dieser Arbeit](https://github.com/vercel/next.js/pull/51546) veröffentlicht. Erwarten Sie weitere Updates dazu in den kommenden Releases. + +#### [Produktionsleistung](#production-performance) + +Schließlich arbeiten wir bei Vercel daran, die Leistung und Speichernutzung von Vercel Functions zu optimieren, [die durch Next.js-Anwendungscode definiert sind](https://vercel.com/blog/framework-defined-infrastructure), um minimale Cold Starts bei gleichzeitiger Beibehaltung der Vorteile einer skalierbaren Serverless-Architektur zu gewährleisten. Diese Arbeit hat zu neuen [Tracing-Fähigkeiten](/docs/app/building-your-application/optimizing/open-telemetry) (experimentell) in Next.js und frühen Erkundungen von serverseitigen Entwicklertools geführt. + +[Verbesserung der Stabilität](#improving-stability) +------------------------------------------- + +Der Pages Router existiert seit sechs Jahren. Die Veröffentlichung des App Routers bedeutete die Einführung neuer APIs, die noch jung sind, mit nur sechs Monaten Nutzung. Wir haben in kurzer Zeit viel erreicht, aber es gibt noch Möglichkeiten zur Verbesserung, während wir mehr von unserer Community und deren Nutzung lernen. + +Wir schätzen die Bereitschaft der Community, den App Router eifrig zu nutzen und Feedback zu geben. Es gab eine Reihe von Bug-Reports, die wir untersuchen, und wir sind dankbar für die minimalen Reproduktionen, die Sie erstellt haben, um Probleme zu isolieren und Fixes zu verifizieren. + +Seit Version 13.4 haben wir bereits eine Reihe von hochwirksamen Stabilitäts-Bugs gepatcht, die in der neuesten Patch-Version (`13.4.7`) verfügbar sind. Wir werden uns weiterhin mit hoher Intensität auf Leistung und Stabilität konzentrieren. + +[Verbesserung der Entwicklerbildung](#improving-developer-education) +--------------------------------------------------------------- + +Während wir glauben, dass die neuen Funktionen des App Routers und des modernen React leistungsstark sind, erfordern sie auch zusätzliche Schulung und Dokumentation, um diese neuen Konzepte zu vermitteln. + +### [Next.js-Funktionen](#nextjs-features) + +Wir haben im letzten Jahr daran gearbeitet, die Next.js-Dokumentation von Grund auf neu zu schreiben. Diese Arbeit ist jetzt auf [nextjs.org/docs](/docs) live. Wir möchten einige [wichtige Teile](https://twitter.com/delba_oliveira/status/1664323492077256704) hervorheben: + +* **Pages und App Umschalter**: Sie können zwischen der Dokumentation für den Pages Router oder den App Router wechseln, indem Sie die Schaltfläche auf der linken Seite der Dokumentation verwenden. Darüber hinaus können Sie Suchergebnisse basierend auf Ihrer Router-Wahl filtern. +* **Verbesserter Inhalt und Informationsarchitektur**: Fast jede Seite der App-Router-Dokumentation wurde überarbeitet, einschließlich einer klareren Struktur und Kohärenz zwischen den Seiten sowie Hunderten von neuen Illustrationen, um visuell zu erklären, wie Next.js funktioniert. +* **Mehr kommt noch**: Wir haben hier noch mehr Arbeit vor uns. Das Developer-Experience-Team bei Vercel arbeitet hart daran, zusätzliche Lernressourcen bereitzustellen (einschließlich eines aktualisierten Kurses auf `/learn`, der den App Router lehrt) und Beispiele aus realen Codebasen (einschließlich einer Neuentwicklung von [Next.js Commerce](https://github.com/vercel/commerce)). + +Wir werden neue Inhalte in der [Dokumentation](/docs), auf [Twitter](https://twitter.com/nextjs), [YouTube](https://www.youtube.com/c/VercelHQ) und mehr veröffentlichen. + +### [Neue React-Funktionen](#new-react-features) + +Wir haben auch Ihr Feedback zur Schulung über neue React-Funktionen gehört, die im Next.js App Router verfügbar sind. + +* **Server Components**: Es ist wichtig zu beachten, dass Funktionen wie Server Components und Konventionen wie die [`"use client"`-Direktive](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) nicht Next.js-spezifisch sind, sondern Teil des größeren React-Ökosystems. + + Unser Team, unsere Partner bei Meta und andere unabhängige Mitwirkende arbeiten daran, mehr Schulungen zu diesen Themen bereitzustellen. Es sind frühe Tage für diese Konzepte, aber wir vertrauen auf das React-Ökosystem und [fortlaufende Schulungen](https://github.com/reactwg/server-components/discussions/5). + +* **Client Components**: Mit der aktuellen Diskussion über Server Components ist es wichtig zu beachten, dass Client Components _keine_ De-Optimierung darstellen. Der Client ist ein gültiger Teil des React-Modells und wird nicht verschwinden. + + Sie können sich Client Components als das bestehende Next.js-Ökosystem vorstellen, in dem Ihre bevorzugten Bibliotheken und Tools weiterhin funktionieren. Eine häufige Frage, die wir gesehen haben, ist, ob `"use client"` zu jeder einzelnen Datei hinzugefügt werden muss, um sie zu einer Client-Komponente zu machen. Dies ist nicht notwendig, aber wir verstehen, dass diese Konzepte neu sind und Zeit zum Lernen benötigen. Sie müssen nur [die oberste Grenze markieren](/docs/getting-started/react-essentials#the-use-client-directive), an der Ihr Code vom Server zum Client wechselt. Diese Architektur ermöglicht es Ihnen, [Server- und Client-Komponenten miteinander zu verweben](https://github.com/reactwg/server-components/discussions/5). + +* **Wachsendes Drittanbieter-Ökosystem**: Neben der Schulung wächst das Ökosystem um die neueren React-Funktionen noch. Beispielsweise hat [Panda CSS](https://panda-css.com/), eine CSS-in-JS-Bibliothek der Macher von Chakra UI, gerade die Unterstützung für React Server Components angekündigt. + +* **Server Actions (Alpha)**: [Server Actions](/docs/app/building-your-application/data-fetching/server-actions) ermöglichen serverseitige Datenmutationen, reduzieren clientseitiges JavaScript und bieten progressiv verbesserte Formulare. Wir empfehlen noch nicht, Server Actions in der Produktion zu verwenden. Wir schätzen das frühe Feedback von Alpha-Testern, die uns helfen, die Zukunft dieser Funktion zu gestalten. + + +[Danke](#thank-you) +----------------------- + +Wir sind dankbar, dass viele von Ihnen sich entschieden haben, mit Next.js zu lernen und zu bauen. + +Unser Fokus auf Leistung, Stabilität und Entwicklererfahrung wird sich in den kommenden Releases von Next.js widerspiegeln. Wir möchten, dass die Nutzung von Next.js erfreulich ist – und Sie (und Ihr Team) produktiver macht. + +Wie immer schätzen wir Ihr Feedback sehr. Wenn Sie Probleme mit Next.js haben, [eröffnen Sie bitte ein Issue](https://github.com/vercel/next.js/issues/new/choose) oder [starten Sie eine neue Diskussion](https://github.com/vercel/next.js/discussions), und wir werden es untersuchen. \ No newline at end of file diff --git a/apps/docs/content/de/blog/layouts-rfc.mdx b/apps/docs/content/de/blog/layouts-rfc.mdx new file mode 100644 index 00000000..a66c509d --- /dev/null +++ b/apps/docs/content/de/blog/layouts-rfc.mdx @@ -0,0 +1,911 @@ +--- +source-updated-at: 2025-05-29T19:07:21.000Z +translation-updated-at: 2025-06-02T19:47:29.969Z +title: Layouts RFC +description: >- + Verschachtelte Routen und Layouts, Client- und Server-Routing, React 18-Funktionen und + entwickelt für 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 +--- + +Dieses RFC (Request for Comment) skizziert das größte Update für Next.js seit seiner Einführung im Jahr 2016: + +* **Verschachtelte Layouts:** Erstellen Sie komplexe Anwendungen mit verschachtelten Routen. +* **Entwickelt für Server Components:** Optimiert für die Navigation in Teilbäumen. +* **Verbessertes Data Fetching:** Datenabruf in Layouts ohne Waterfalls. +* **Nutzung von React 18-Funktionen:** Streaming, Transitions und Suspense. +* **Client- und Server-Routing:** Server-zentriertes Routing mit _SPA-ähnlichem_ Verhalten. +* **100% schrittweise übernehmbar:** Keine Breaking Changes, sodass Sie schrittweise migrieren können. +* **Fortgeschrittene Routing-Muster:** Parallele Routen, abfangende Routen und mehr. + +Der neue Next.js-Router wird auf den [kürzlich veröffentlichten React 18](https://reactjs.org/blog/2022/03/29/react-v18.html)-Funktionen aufgebaut. Wir planen, Standardwerte und Konventionen einzuführen, die es Ihnen ermöglichen, diese neuen Funktionen einfach zu übernehmen und die Vorteile zu nutzen, die sie bieten. + +> Die Arbeit an diesem RFC ist noch im Gange, und wir werden ankündigen, wann die neuen Funktionen verfügbar sind. Um Feedback zu geben, beteiligen Sie sich an der Diskussion auf [Github Discussions](https://github.com/vercel/next.js/discussions/37136). + +[Inhaltsverzeichnis](#inhaltsverzeichnis) +----------------------------------------- + +* [Motivation](#motivation) +* [Terminologie](#terminologie) +* [Aktuelle Funktionsweise des Routings](#aktuelle-funktionsweise-des-routings) +* [Das `app`-Verzeichnis](#einführung-des-app-routers) +* [Definition von Routen](#definition-von-routen) +* [Layouts](#layouts) +* [Seiten](#seiten) +* [React Server Components](#react-server-components) +* [Data Fetching](#data-fetching) +* [Routengruppen (neu)](#routengruppen) +* [Server-zentriertes Routing (neu)](#server-zentriertes-routing) +* [Sofortige Ladezustände (neu)](#sofortige-ladezustände) +* [Fehlerbehandlung (neu)](#fehlerbehandlung) +* [Vorlagen (neu)](#vorlagen) +* [Fortgeschrittene Routing-Muster (neu)](#fortgeschrittene-routing-muster) +* [Fazit](#fazit) + +[Motivation](#motivation) +------------------------- + +Wir haben Feedback aus der Community von GitHub, Discord, Reddit und unserer Entwicklerumfrage zu den aktuellen Einschränkungen des Routings in Next.js gesammelt. Dabei haben wir festgestellt: + +* Die Developer Experience bei der Erstellung von Layouts kann verbessert werden. Es sollte einfach sein, Layouts zu erstellen, die verschachtelt, über Routen hinweg geteilt und deren Zustand bei der Navigation erhalten bleiben kann. +* Viele Next.js-Anwendungen sind Dashboards oder Konsolen, die von fortgeschritteneren Routing-Lösungen profitieren würden. + +Während das aktuelle Routing-System seit den Anfängen von Next.js gut funktioniert hat, möchten wir es Entwicklern erleichtern, performantere und funktionsreichere Webanwendungen zu erstellen. + +Als Framework-Maintainer möchten wir auch ein Routing-System aufbauen, das abwärtskompatibel ist und mit der Zukunft von React übereinstimmt. + +> **Hinweis:** Einige Routing-Konventionen wurden vom Relay-basierten Router bei Meta inspiriert, wo einige Funktionen von Server Components ursprünglich entwickelt wurden, sowie von Client-seitigen Routern wie React Router und Ember.js. Die `layout.js`-Dateikonvention wurde von der Arbeit in SvelteKit inspiriert. Wir möchten uns auch bei [Cassidy](https://twitter.com/cassidoo) für das Öffnen eines [früheren RFC zu Layouts](https://github.com/vercel/next.js/discussions/26389) bedanken. + +[Terminologie](#terminologie) +----------------------------- + +Dieses RFC führt neue Routing-Konventionen und Syntax ein. Die Terminologie basiert auf React und standardmäßigen Web-Plattformbegriffen. Im gesamten RFC werden diese Begriffe mit ihren Definitionen unten verlinkt. + +* **Baum:** Eine Konvention zur Visualisierung einer hierarchischen Struktur. Zum Beispiel ein Komponentenbaum mit Eltern- und Kinderkomponenten, eine Ordnerstruktur usw. +* **Teilbaum:** Ein Teil des Baums, der an der Wurzel (erster) beginnt und an den Blättern (letzter) endet. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/terminology.png) + +* **URL-Pfad:** Der Teil der URL, der nach der Domain kommt. +* **URL-Segment:** Ein Teil des URL-Pfads, der durch Schrägstriche begrenzt wird. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/url-anatomy.png) + +[Aktuelle Funktionsweise des Routings](#aktuelle-funktionsweise-des-routings) +---------------------------------------------------------------------------- + +Aktuell verwendet Next.js das Dateisystem, um einzelne Ordner und Dateien im [Pages](/docs/pages/building-your-application/routing/pages-and-layouts)-Verzeichnis Routen zuzuordnen, die über URLs erreichbar sind. Jede **Seiten**-Datei exportiert eine React-Komponente und hat eine zugehörige **Route** basierend auf ihrem Dateinamen. Zum Beispiel: + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routing-today.png) + +* **Dynamische Routen:** Next.js unterstützt [Dynamische Routen](/docs/pages/building-your-application/routing/dynamic-routes) (einschließlich Catch-All-Varianten) mit den Konventionen `[param].js`, `[...param].js` und `[[...param]].js`. +* **Layouts:** Next.js bietet Unterstützung für einfache [komponentenbasierte](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern) Layouts, pro-Seite-Layouts mit einem [Property-Pattern](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts) und ein einzelnes globales Layout mit einer [Custom App](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#single-shared-layout-with-custom-app). +* **Data Fetching:** Next.js bietet Data-Fetching-Methoden ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)), die auf der Seiten- (Routen-)Ebene verwendet werden können. Diese Methoden werden verwendet, um zu bestimmen, ob eine Seite statisch generiert ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)) oder serverseitig gerendert ([`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)) werden soll. Zusätzlich können Sie [Incremental Static Regeneration (ISR)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) verwenden, um statische Seiten nach dem Build einer Website zu erstellen oder zu aktualisieren. +* **Rendering:** Next.js bietet drei Rendering-Optionen: [Static Generation](https://nextjs.org/learn/foundations/how-nextjs-works/rendering), [Server-Side Rendering](https://nextjs.org/learn/foundations/how-nextjs-works/rendering) und [Client-Side Rendering](https://nextjs.org/learn/foundations/how-nextjs-works/rendering). Standardmäßig werden Seiten statisch generiert, es sei denn, sie haben eine blockierende Data-Fetching-Anforderung (`getServerSideProps`). + +[Einführung des `app`-Verzeichnisses](#einführung-des-app-verzeichnisses) +------------------------------------------------------------------------- + +Um sicherzustellen, dass diese neuen Verbesserungen schrittweise übernommen werden können und keine Breaking Changes verursachen, schlagen wir ein neues Verzeichnis namens `app` vor. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/app-folder.png) + +Das `app`-Verzeichnis wird parallel zum `pages`-Verzeichnis arbeiten. Sie können Teile Ihrer Anwendung schrittweise in das neue `app`-Verzeichnis verschieben, um die neuen Funktionen zu nutzen. Für die Abwärtskompatibilität bleibt das Verhalten des `pages`-Verzeichnisses unverändert und wird weiterhin unterstützt. + +[Definition von Routen](#definition-von-routen) +---------------------------------------------- + +Sie können die **Ordner**-Hierarchie innerhalb von `app` verwenden, um Routen zu definieren. Eine **Route** ist ein einzelner Pfad verschachtelter Ordner, der der Hierarchie vom **Root-Ordner** bis zu einem finalen **Blatt-Ordner** folgt. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routes.png) + +Sie können beispielsweise eine neue `/dashboard/settings`-Route erstellen, indem Sie zwei neue Ordner im `app`-Verzeichnis verschachteln. + +> **Hinweis:** +> +> * Mit diesem System verwenden Sie Ordner, um Routen zu definieren, und Dateien, um die Benutzeroberfläche zu definieren (mit neuen Dateikonventionen wie `layout.js`, `page.js` und im zweiten Teil des RFC `loading.js`). +> * Dies ermöglicht es Ihnen, Ihre eigenen Projektdateien (UI-Komponenten, Testdateien, Stories usw.) innerhalb des `app`-Verzeichnisses zu platzieren. Derzeit ist dies nur mit der [pageExtensions-Konfiguration](/docs/pages/api-reference/next-config-js/pageExtensions#including-non-page-files-in-the-pages-directory) möglich. + +### [Routensegmente](#routensegmente) + +Jeder Ordner im [Teilbaum](#terminologie) repräsentiert ein **Routensegment**. Jedes Routensegment wird einem entsprechenden **Segment** in einem **[URL-Pfad](#terminologie)** zugeordnet. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-segments.png) + +Die `/dashboard/settings`-Route besteht beispielsweise aus 3 Segmenten: + +* Das `/`-Root-Segment +* Das `dashboard`-Segment +* Das `settings`-Segment + +> **Hinweis**: Der Name **Routensegment** wurde gewählt, um der bestehenden Terminologie zu [URL-Pfaden](#terminologie) zu entsprechen. + +[Layouts](#layouts) +------------------- + +**Neue Dateikonvention:** `layout.js` + +Bisher haben wir Ordner verwendet, um die Routen unserer Anwendung zu definieren. Aber leere Ordner tun nichts von alleine. Lassen Sie uns besprechen, wie Sie die Benutzeroberfläche definieren können, die für diese Routen mit neuen Dateikonventionen gerendert wird. + +Ein **Layout** ist eine Benutzeroberfläche, die zwischen Routensegmenten in einem [Teilbaum](#terminologie) geteilt wird. Layouts beeinflussen [URL-Pfade](#terminologie) nicht und werden nicht neu gerendert (der React-Zustand bleibt erhalten), wenn ein Benutzer zwischen gleichrangigen Segmenten navigiert. + +Ein Layout kann definiert werden, indem eine React-Komponente standardmäßig aus einer `layout.js`-Datei exportiert wird. Die Komponente sollte eine `children`-Prop akzeptieren, die mit den Segmenten gefüllt wird, die das Layout umschließt. + +Es gibt 2 Arten von Layouts: + +* **Root-Layout:** Gilt für alle Routen +* **Reguläres Layout:** Gilt für bestimmte Routen + +Sie können zwei oder mehr Layouts verschachteln, um **verschachtelte Layouts** zu bilden. + +### [Root-Layout](#root-layout) + +Sie können ein Root-Layout erstellen, das für alle Routen Ihrer Anwendung gilt, indem Sie eine `layout.js`-Datei im `app`-Ordner hinzufügen. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/root-layout.png) + +> **Hinweis:** +> +> * Das Root-Layout ersetzt die Notwendigkeit einer [Custom App (`_app.js`)](/docs/pages/building-your-application/routing/custom-app) und einer [Custom Document (`_document.js`)](/docs/pages/building-your-application/routing/custom-document), da es für alle Routen gilt. +> * Sie können das Root-Layout verwenden, um das anfängliche Dokumentgerüst (z. B. ``- und ``-Tags) anzupassen. +> * Sie können Daten innerhalb des Root-Layouts (und anderer Layouts) abrufen. + +### [Reguläre Layouts](#reguläre-layouts) + +Sie können auch ein Layout erstellen, das nur für einen Teil Ihrer Anwendung gilt, indem Sie eine `layout.js`-Datei in einem bestimmten Ordner hinzufügen. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/regular-layouts.png) + +Sie können beispielsweise eine `layout.js`-Datei im `dashboard`-Ordner erstellen, die nur für die Routensegmente innerhalb von `dashboard` gilt. + +### [Verschachtelte Layouts](#verschachtelte-layouts) + +Layouts sind standardmäßig **verschachtelt**. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts.png) + +Wenn wir beispielsweise die beiden oben genannten Layouts kombinieren würden. Das Root-Layout (`app/layout.js`) würde auf das `dashboard`-Layout angewendet werden, das auch für alle Routensegmente innerhalb von `dashboard/*` gilt. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts-example.png) + +[Seiten](#seiten) +----------------- + +**Neue Dateikonvention:** `page.js` + +Eine Seite ist eine Benutzeroberfläche, die für ein Routensegment einzigartig ist. Sie können eine Seite erstellen, indem Sie eine `page.js`-Datei in einem Ordner hinzufügen. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page.png) + +Um beispielsweise Seiten für die `/dashboard/*`-Routen zu erstellen, können Sie eine `page.js`-Datei in jedem Ordner hinzufügen. Wenn ein Benutzer `/dashboard/settings` besucht, rendert Next.js die `page.js`-Datei für den `settings`-Ordner, eingebettet in alle Layouts, die weiter oben im [Teilbaum](#terminologie) existieren. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-example.png) + +Sie können eine `page.js`-Datei direkt im Dashboard-Ordner erstellen, um die `/dashboard`-Route abzugleichen. Das Dashboard-Layout gilt auch für diese Seite: + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-nested.png) + +Diese Route besteht aus 2 Segmenten: + +* Das `/`-Root-Segment +* Das `dashboard`-Segment + +> **Hinweis:** +> +> * Damit eine Route gültig ist, muss sie eine Seite in ihrem Blattsegment haben. Andernfalls wird die Route einen Fehler auslösen. + +### [Layout- und Seitenverhalten](#layout-und-seitenverhalten) + +* Die Dateierweiterungen `js|jsx|ts|tsx` können für Seiten und Layouts verwendet werden. +* Seitenkomponenten sind der Standardexport von `page.js`. +* Layoutkomponenten sind der Standardexport von `layout.js`. +* Layoutkomponenten **müssen** eine `children`-Prop akzeptieren. + +Wenn eine Layoutkomponente gerendert wird, wird die `children`-Prop mit einem untergeordneten Layout (falls es weiter unten im [Teilbaum](#terminologie) existiert) oder einer Seite gefüllt. + +Es kann einfacher sein, es sich als einen Layout-[Baum](#terminologie) vorzustellen, bei dem das übergeordnete Layout das nächstgelegene untergeordnete Layout auswählt, bis es eine Seite erreicht. + +**Beispiel:** + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/basic-example.png) + +```js filename="app/layout.js" +// Root-Layout +// - Gilt für alle Routen +export default function RootLayout({ children }) { + return ( + + +
+ {children} +