From bea2b3cc252341532fc7b87318b850110682339a Mon Sep 17 00:00:00 2001 From: xiaoyu2er Date: Mon, 2 Jun 2025 19:26:15 +0000 Subject: [PATCH] docs: update documentation translations --- .../es/blog/building-apis-with-nextjs.mdx | 396 ++++++++ .../content/es/blog/composable-caching.mdx | 202 ++++ apps/docs/content/es/blog/create-next-app.mdx | 39 + .../content/es/blog/incremental-adoption.mdx | 109 +++ .../docs/content/es/blog/june-2023-update.mdx | 148 +++ apps/docs/content/es/blog/layouts-rfc.mdx | 911 ++++++++++++++++++ apps/docs/content/es/blog/next-10-1.mdx | 222 +++++ apps/docs/content/es/blog/next-10-2.mdx | 183 ++++ apps/docs/content/es/blog/next-10.mdx | 427 ++++++++ apps/docs/content/es/blog/next-11-1.mdx | 183 ++++ apps/docs/content/es/blog/next-11.mdx | 219 +++++ apps/docs/content/es/blog/next-12-1.mdx | 218 +++++ apps/docs/content/es/blog/next-12-2.mdx | 271 ++++++ apps/docs/content/es/blog/next-12-3.mdx | 181 ++++ apps/docs/content/es/blog/next-12.mdx | 270 ++++++ apps/docs/content/es/blog/next-13-1.mdx | 216 +++++ apps/docs/content/es/blog/next-13-2.mdx | 375 +++++++ apps/docs/content/es/blog/next-13-3.mdx | 273 ++++++ apps/docs/content/es/blog/next-13-4.mdx | 466 +++++++++ apps/docs/content/es/blog/next-13-5.mdx | 179 ++++ apps/docs/content/es/blog/next-13.mdx | 431 +++++++++ apps/docs/content/es/blog/next-14-1.mdx | 271 ++++++ apps/docs/content/es/blog/next-14-2.mdx | 218 +++++ apps/docs/content/es/blog/next-14.mdx | 298 ++++++ apps/docs/content/es/blog/next-15-1.mdx | 294 ++++++ apps/docs/content/es/blog/next-15-2.mdx | 230 +++++ apps/docs/content/es/blog/next-15-3.mdx | 206 ++++ apps/docs/content/es/blog/next-15-rc.mdx | 347 +++++++ apps/docs/content/es/blog/next-15-rc2.mdx | 405 ++++++++ apps/docs/content/es/blog/next-15.mdx | 572 +++++++++++ apps/docs/content/es/blog/next-5-1.mdx | 184 ++++ apps/docs/content/es/blog/next-5.mdx | 361 +++++++ apps/docs/content/es/blog/next-6-1.mdx | 141 +++ apps/docs/content/es/blog/next-6.mdx | 175 ++++ apps/docs/content/es/blog/next-7.mdx | 388 ++++++++ apps/docs/content/es/blog/next-8-0-4.mdx | 174 ++++ apps/docs/content/es/blog/next-8-1.mdx | 146 +++ apps/docs/content/es/blog/next-8.mdx | 350 +++++++ apps/docs/content/es/blog/next-9-0-7.mdx | 257 +++++ apps/docs/content/es/blog/next-9-1-7.mdx | 217 +++++ apps/docs/content/es/blog/next-9-1.mdx | 198 ++++ apps/docs/content/es/blog/next-9-2.mdx | 219 +++++ apps/docs/content/es/blog/next-9-3.mdx | 534 ++++++++++ apps/docs/content/es/blog/next-9-4.mdx | 295 ++++++ apps/docs/content/es/blog/next-9-5.mdx | 398 ++++++++ apps/docs/content/es/blog/next-9.mdx | 438 +++++++++ .../es/blog/our-journey-with-caching.mdx | 219 +++++ ...urity-nextjs-server-components-actions.mdx | 299 ++++++ .../es/blog/styling-next-with-styled-jsx.mdx | 373 +++++++ .../blog/turbopack-for-development-stable.mdx | 294 ++++++ apps/docs/content/es/blog/webpack-memory.mdx | 95 ++ .../01-what-is-react-and-nextjs.mdx | 72 ++ .../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 ++++ .../es/learn/01-react-foundations/index.mdx | 32 + .../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 | 151 +++ .../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 | 476 +++++++++ .../02-dashboard-app/16-adding-metadata.mdx | 163 ++++ .../es/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 ++ .../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 + .../es/learn/03-pages-router/index.mdx | 53 + .../es/learn/04-seo/01-importance-of-seo.mdx | 28 + .../es/learn/04-seo/02-search-systems.mdx | 18 + .../es/learn/04-seo/03-webcrawlers.mdx | 43 + .../learn/04-seo/04-crawling-and-indexing.mdx | 16 + .../es/learn/04-seo/05-status-codes.mdx | 132 +++ .../content/es/learn/04-seo/06-robots-txt.mdx | 36 + .../es/learn/04-seo/07-xml-sitemaps.mdx | 107 ++ .../content/es/learn/04-seo/08-metatags.mdx | 96 ++ .../content/es/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/es/learn/04-seo/12-amp.mdx | 15 + .../es/learn/04-seo/13-url-structure.mdx | 122 +++ .../content/es/learn/04-seo/14-metadata.mdx | 212 ++++ .../es/learn/04-seo/15-on-page-seo.mdx | 81 ++ .../es/learn/04-seo/16-web-performance.mdx | 23 + .../es/learn/04-seo/17-vitals-overview.mdx | 24 + apps/docs/content/es/learn/04-seo/18-lcp.mdx | 27 + apps/docs/content/es/learn/04-seo/19-fid.mdx | 23 + apps/docs/content/es/learn/04-seo/20-cls.mdx | 25 + .../content/es/learn/04-seo/21-seo-impact.mdx | 40 + .../content/es/learn/04-seo/22-improve.mdx | 19 + .../content/es/learn/04-seo/23-lighthouse.mdx | 70 ++ .../content/es/learn/04-seo/24-images.mdx | 85 ++ .../es/learn/04-seo/25-dynamic-imports.mdx | 70 ++ .../04-seo/26-dynamic-import-components.mdx | 66 ++ .../docs/content/es/learn/04-seo/27-fonts.mdx | 27 + .../learn/04-seo/28-third-party-scripts.mdx | 54 ++ .../content/es/learn/04-seo/29-monitor.mdx | 17 + .../learn/04-seo/30-nextjs-speed-insights.mdx | 14 + .../es/learn/04-seo/31-custom-reporting.mdx | 41 + .../es/learn/04-seo/32-other-tools.mdx | 20 + .../es/learn/04-seo/33-data-studio.mdx | 26 + apps/docs/content/es/learn/04-seo/index.mdx | 28 + 159 files changed, 24418 insertions(+) create mode 100644 apps/docs/content/es/blog/building-apis-with-nextjs.mdx create mode 100644 apps/docs/content/es/blog/composable-caching.mdx create mode 100644 apps/docs/content/es/blog/create-next-app.mdx create mode 100644 apps/docs/content/es/blog/incremental-adoption.mdx create mode 100644 apps/docs/content/es/blog/june-2023-update.mdx create mode 100644 apps/docs/content/es/blog/layouts-rfc.mdx create mode 100644 apps/docs/content/es/blog/next-10-1.mdx create mode 100644 apps/docs/content/es/blog/next-10-2.mdx create mode 100644 apps/docs/content/es/blog/next-10.mdx create mode 100644 apps/docs/content/es/blog/next-11-1.mdx create mode 100644 apps/docs/content/es/blog/next-11.mdx create mode 100644 apps/docs/content/es/blog/next-12-1.mdx create mode 100644 apps/docs/content/es/blog/next-12-2.mdx create mode 100644 apps/docs/content/es/blog/next-12-3.mdx create mode 100644 apps/docs/content/es/blog/next-12.mdx create mode 100644 apps/docs/content/es/blog/next-13-1.mdx create mode 100644 apps/docs/content/es/blog/next-13-2.mdx create mode 100644 apps/docs/content/es/blog/next-13-3.mdx create mode 100644 apps/docs/content/es/blog/next-13-4.mdx create mode 100644 apps/docs/content/es/blog/next-13-5.mdx create mode 100644 apps/docs/content/es/blog/next-13.mdx create mode 100644 apps/docs/content/es/blog/next-14-1.mdx create mode 100644 apps/docs/content/es/blog/next-14-2.mdx create mode 100644 apps/docs/content/es/blog/next-14.mdx create mode 100644 apps/docs/content/es/blog/next-15-1.mdx create mode 100644 apps/docs/content/es/blog/next-15-2.mdx create mode 100644 apps/docs/content/es/blog/next-15-3.mdx create mode 100644 apps/docs/content/es/blog/next-15-rc.mdx create mode 100644 apps/docs/content/es/blog/next-15-rc2.mdx create mode 100644 apps/docs/content/es/blog/next-15.mdx create mode 100644 apps/docs/content/es/blog/next-5-1.mdx create mode 100644 apps/docs/content/es/blog/next-5.mdx create mode 100644 apps/docs/content/es/blog/next-6-1.mdx create mode 100644 apps/docs/content/es/blog/next-6.mdx create mode 100644 apps/docs/content/es/blog/next-7.mdx create mode 100644 apps/docs/content/es/blog/next-8-0-4.mdx create mode 100644 apps/docs/content/es/blog/next-8-1.mdx create mode 100644 apps/docs/content/es/blog/next-8.mdx create mode 100644 apps/docs/content/es/blog/next-9-0-7.mdx create mode 100644 apps/docs/content/es/blog/next-9-1-7.mdx create mode 100644 apps/docs/content/es/blog/next-9-1.mdx create mode 100644 apps/docs/content/es/blog/next-9-2.mdx create mode 100644 apps/docs/content/es/blog/next-9-3.mdx create mode 100644 apps/docs/content/es/blog/next-9-4.mdx create mode 100644 apps/docs/content/es/blog/next-9-5.mdx create mode 100644 apps/docs/content/es/blog/next-9.mdx create mode 100644 apps/docs/content/es/blog/our-journey-with-caching.mdx create mode 100644 apps/docs/content/es/blog/security-nextjs-server-components-actions.mdx create mode 100644 apps/docs/content/es/blog/styling-next-with-styled-jsx.mdx create mode 100644 apps/docs/content/es/blog/turbopack-for-development-stable.mdx create mode 100644 apps/docs/content/es/blog/webpack-memory.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/01-what-is-react-and-nextjs.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/02-rendering-ui.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/03-updating-ui-with-javascript.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/04-getting-started-with-react.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/05-building-ui-with-components.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/06-displaying-data-with-props.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/07-updating-state.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/08-from-react-to-nextjs.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/09-installation.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/10-server-and-client-components.mdx create mode 100644 apps/docs/content/es/learn/01-react-foundations/index.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/01-getting-started.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/02-css-styling.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/03-optimizing-fonts-images.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/04-creating-layouts-and-pages.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/05-navigating-between-pages.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/06-setting-up-your-database.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/07-fetching-data.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/08-static-and-dynamic-rendering.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/09-streaming.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/10-partial-prerendering.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/11-adding-search-and-pagination.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/12-mutating-data.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/13-error-handling.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/14-improving-accessibility.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/15-adding-authentication.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/16-adding-metadata.mdx create mode 100644 apps/docs/content/es/learn/02-dashboard-app/index.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/01-create-nextjs-app-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/02-create-nextjs-app-welcome-to-nextjs.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/03-create-nextjs-app-editing-the-page.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/04-navigate-between-pages.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/05-navigate-between-pages-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/06-navigate-between-pages-pages-in-nextjs.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/07-navigate-between-pages-link-component.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/08-navigate-between-pages-client-side.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/09-assets-metadata-css-layout-component.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/10-assets-metadata-css.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/11-assets-metadata-css-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/12-assets-metadata-css-assets.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/13-assets-metadata-css-metadata.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/14-assets-metadata-css-third-party-javascript.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/15-assets-metadata-css-css-styling.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/16-assets-metadata-css-global-styles.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/18-assets-metadata-css-styling-tips.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/19-data-fetching-blog-data.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/20-data-fetching.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/21-data-fetching-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/22-data-fetching-pre-rendering.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/23-data-fetching-two-forms.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/24-data-fetching-with-data.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/25-data-fetching-implement-getstaticprops.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/26-data-fetching-getstaticprops-details.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/27-data-fetching-request-time.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/28-dynamic-routes.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/29-dynamic-routes-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/30-dynamic-routes-page-path-external-data.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/31-dynamic-routes-implement-getstaticpaths.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/32-dynamic-routes-implement-getstaticprops.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/33-dynamic-routes-render-markdown.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/34-dynamic-routes-polishing-post-page.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/35-dynamic-routes-polishing-index-page.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/36-dynamic-routes-dynamic-routes-details.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/37-api-routes.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/38-api-routes-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/39-api-routes-creating-api-routes.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/40-api-routes-api-routes-details.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/41-deploying-nextjs-app.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/42-deploying-nextjs-app-setup.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/43-deploying-nextjs-app-github.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/44-deploying-nextjs-app-deploy.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/45-deploying-nextjs-app-platform-details.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/46-deploying-nextjs-app-other-hosting-options.mdx create mode 100644 apps/docs/content/es/learn/03-pages-router/index.mdx create mode 100644 apps/docs/content/es/learn/04-seo/01-importance-of-seo.mdx create mode 100644 apps/docs/content/es/learn/04-seo/02-search-systems.mdx create mode 100644 apps/docs/content/es/learn/04-seo/03-webcrawlers.mdx create mode 100644 apps/docs/content/es/learn/04-seo/04-crawling-and-indexing.mdx create mode 100644 apps/docs/content/es/learn/04-seo/05-status-codes.mdx create mode 100644 apps/docs/content/es/learn/04-seo/06-robots-txt.mdx create mode 100644 apps/docs/content/es/learn/04-seo/07-xml-sitemaps.mdx create mode 100644 apps/docs/content/es/learn/04-seo/08-metatags.mdx create mode 100644 apps/docs/content/es/learn/04-seo/09-canonical.mdx create mode 100644 apps/docs/content/es/learn/04-seo/10-rendering-and-ranking.mdx create mode 100644 apps/docs/content/es/learn/04-seo/11-rendering-strategies.mdx create mode 100644 apps/docs/content/es/learn/04-seo/12-amp.mdx create mode 100644 apps/docs/content/es/learn/04-seo/13-url-structure.mdx create mode 100644 apps/docs/content/es/learn/04-seo/14-metadata.mdx create mode 100644 apps/docs/content/es/learn/04-seo/15-on-page-seo.mdx create mode 100644 apps/docs/content/es/learn/04-seo/16-web-performance.mdx create mode 100644 apps/docs/content/es/learn/04-seo/17-vitals-overview.mdx create mode 100644 apps/docs/content/es/learn/04-seo/18-lcp.mdx create mode 100644 apps/docs/content/es/learn/04-seo/19-fid.mdx create mode 100644 apps/docs/content/es/learn/04-seo/20-cls.mdx create mode 100644 apps/docs/content/es/learn/04-seo/21-seo-impact.mdx create mode 100644 apps/docs/content/es/learn/04-seo/22-improve.mdx create mode 100644 apps/docs/content/es/learn/04-seo/23-lighthouse.mdx create mode 100644 apps/docs/content/es/learn/04-seo/24-images.mdx create mode 100644 apps/docs/content/es/learn/04-seo/25-dynamic-imports.mdx create mode 100644 apps/docs/content/es/learn/04-seo/26-dynamic-import-components.mdx create mode 100644 apps/docs/content/es/learn/04-seo/27-fonts.mdx create mode 100644 apps/docs/content/es/learn/04-seo/28-third-party-scripts.mdx create mode 100644 apps/docs/content/es/learn/04-seo/29-monitor.mdx create mode 100644 apps/docs/content/es/learn/04-seo/30-nextjs-speed-insights.mdx create mode 100644 apps/docs/content/es/learn/04-seo/31-custom-reporting.mdx create mode 100644 apps/docs/content/es/learn/04-seo/32-other-tools.mdx create mode 100644 apps/docs/content/es/learn/04-seo/33-data-studio.mdx create mode 100644 apps/docs/content/es/learn/04-seo/index.mdx diff --git a/apps/docs/content/es/blog/building-apis-with-nextjs.mdx b/apps/docs/content/es/blog/building-apis-with-nextjs.mdx new file mode 100644 index 00000000..cda435f2 --- /dev/null +++ b/apps/docs/content/es/blog/building-apis-with-nextjs.mdx @@ -0,0 +1,396 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:21:02.164Z +title: Construcción de APIs con Next.js +description: Aprende cómo construir APIs utilizando Next.js. +author: + - name: Lee Robinson + image: /static/team/lee.jpg +date: 2025-02-28T14:00:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/building-apis-with-nextjs/twitter-card.png +--- + +Esta guía cubrirá cómo puedes construir APIs con Next.js, incluyendo la configuración de tu proyecto, comprensión del App Router y Route Handlers, manejo de múltiples métodos HTTP, implementación de enrutamiento dinámico, creación de lógica de middleware reutilizable y cómo decidir cuándo implementar una capa de API dedicada. + +* [1\. Comenzando](#1-comenzando) + * [1.1 Crear una aplicación Next.js](#11-crear-una-aplicación-nextjs) + * [1.2 App Router vs. Pages Router](#12-app-router-vs-pages-router) +* [2\. Por qué (y cuándo) construir APIs con Next.js](#2-por-qué-y-cuándo-construir-apis-con-nextjs) +* [3\. Creando una API con Route Handlers](#3-creando-una-api-con-route-handlers) + * [3.1 Configuración básica de archivos](#31-configuración-básica-de-archivos) + * [3.2 Múltiples métodos HTTP en un solo archivo](#32-múltiples-métodos-http-en-un-solo-archivo) +* [4\. Trabajando con Web APIs](#4-trabajando-con-web-apis) + * [4.1 Uso directo de Request & Response](#41-uso-directo-de-request--response) + * [4.2 Parámetros de consulta](#42-parámetros-de-consulta) + * [4.3 Cabeceras y cookies](#43-cabeceras-y-cookies) +* [5\. Rutas dinámicas](#5-rutas-dinámicas) +* [6\. Usando Next.js como proxy o capa de reenvío](#6-usando-nextjs-como-proxy-o-capa-de-reenvío) +* [7\. Construyendo lógica de "middleware" compartida](#7-construyendo-lógica-de-middleware-compartida) +* [8\. Consideraciones de despliegue y "Modo SPA"](#8-consideraciones-de-despliegue-y-modo-spa) + * [8.1 Despliegue estándar en Node.js](#81-despliegue-estándar-en-nodejs) + * [8.2 Exportación estática/SPA](#82-exportación-estáticaspá) + * [8.3 Desplegando APIs en Vercel](#83-desplegando-apis-en-vercel) +* [9\. Cuándo omitir la creación de un endpoint API](#9-cuándo-omitir-la-creación-de-un-endpoint-api) +* [10\. Integrando todo](#10-integrando-todo) +* [Conclusión](#conclusión) +* [Preguntas frecuentes](#preguntas-frecuentes) + * [¿Qué hay de las Server Actions?](#qué-hay-de-las-server-actions) + * [¿Puedo usar TypeScript con Route Handlers?](#puedo-usar-typescript-con-route-handlers) + * [¿Cuáles son las mejores prácticas para autenticación?](#cuáles-son-las-mejores-prácticas-para-autenticación) + +[1\. Comenzando](#1-comenzando) +----------------------------------------- + +### [1.1 Crear una aplicación Next.js](#11-crear-una-aplicación-nextjs) + +Si estás comenzando desde cero, puedes crear un nuevo proyecto Next.js usando: + +```bash filename="Terminal" +npx create-next-app@latest --api +``` + +> **Nota:** La bandera `--api` incluye automáticamente un ejemplo de `route.ts` en la carpeta `app/` de tu nuevo proyecto, demostrando cómo crear un endpoint API. + +### [1.2 App Router vs. Pages Router](#12-app-router-vs-pages-router) + +* **Pages Router**: Históricamente, Next.js usaba `pages/api/*` para APIs. Este enfoque dependía de objetos request/response de Node.js y una API similar a Express. +* **App Router (Por defecto)**: Introducido en Next.js 13, el App Router adopta completamente las APIs estándar Web Request/Response. En lugar de `pages/api/*`, ahora puedes colocar archivos `route.ts` o `route.js` en cualquier lugar dentro del directorio `app/`. + +> **¿Por qué cambiar?** Los "Route Handlers" del App Router se basan en las [APIs Request/Response de la Plataforma Web](https://developer.mozilla.org/en-US/docs/Web/API) en lugar de APIs específicas de Node.js. Esto simplifica el aprendizaje, reduce la fricción y te ayuda a reutilizar tu conocimiento en diferentes herramientas. + +[2\. Por qué (y cuándo) construir APIs con Next.js](#2-por-qué-y-cuándo-construir-apis-con-nextjs) +------------------------------------------------------------------------------------------ + +1. **API pública para múltiples clientes** + + * Puedes construir una API pública que sea consumida por tu aplicación web Next.js, una aplicación móvil separada o cualquier servicio de terceros. Por ejemplo, podrías obtener datos desde /api/users tanto en tu sitio web React como en una aplicación móvil React Native. +2. **Proxy a un backend existente** + + * A veces quieres ocultar o consolidar [microservicios](https://vercel.com/blog/how-vercel-adopted-microfrontends) externos detrás de un único endpoint. Los Route Handlers de Next.js pueden actuar como un proxy o capa intermedia para otro backend existente. Por ejemplo, podrías interceptar solicitudes, manejar autenticación, transformar datos y luego pasar la solicitud a una API upstream. +3. **Webhooks e integraciones** + + * Si recibes callbacks o webhooks externos (ej. desde Stripe, GitHub, Twilio), puedes manejarlos con Route Handlers. +4. **Autenticación personalizada** + + * Si necesitas sesiones, tokens u otra lógica de autenticación, puedes almacenar cookies, leer cabeceras y responder con los datos apropiados en tu capa API de Next.js. + +> **Nota:** Si solo necesitas obtención de datos del lado del servidor para tu propia aplicación Next.js (y no necesitas compartir esos datos externamente), los Server Components podrían ser suficientes para obtener datos directamente durante el renderizado—no se requiere una capa API separada. + +[3\. Creando una API con Route Handlers](#3-creando-una-api-con-route-handlers) +--------------------------------------------------------------------------------- + +### [3.1 Configuración básica de archivos](#31-configuración-básica-de-archivos) + +En el App Router (`app/`), crea una carpeta que represente tu ruta, y dentro de ella, un archivo `route.ts`. + +Por ejemplo, para crear un endpoint en `/api/users`: + +``` +app +└── api + └── users + └── route.ts +``` + +### [3.2 Múltiples métodos HTTP en un solo archivo](#32-múltiples-métodos-http-en-un-solo-archivo) + +A diferencia de las rutas API del Pages Router (que tenían una única exportación por defecto), puedes exportar múltiples funciones representando diferentes métodos HTTP desde el mismo archivo. + +```ts filename="app/api/users/route.ts" +export async function GET(request: Request) { + // Por ejemplo, obtén datos de tu base de datos aquí + 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) { + // Analiza el cuerpo de la solicitud + const body = await request.json(); + const { name } = body; + + // ej. Inserta un nuevo usuario en tu base de datos + const newUser = { id: Date.now(), name }; + + return new Response(JSON.stringify(newUser), { + status: 201, + headers: { 'Content-Type': 'application/json' } + }); +} +``` + +Ahora, enviar una solicitud GET a `/api/users` devuelve tu lista de usuarios, mientras que una solicitud `POST` a la misma URL insertará uno nuevo. + +[4\. Trabajando con Web APIs](#4-trabajando-con-web-apis) +----------------------------------------------------- + +### [4.1 Uso directo de Request & Response](#41-uso-directo-de-request--response) + +Por defecto, tus métodos Route Handler (`GET`, `POST`, etc.) reciben un objeto [Request](https://developer.mozilla.org/docs/Web/API/Request) estándar, y debes devolver un objeto [Response](https://developer.mozilla.org/docs/Web/API/Response) estándar. + +### [4.2 Parámetros de consulta](#42-parámetros-de-consulta) + +```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'); // ej. `/api/search?query=hola` + + return new Response( + JSON.stringify({ result: `Buscaste: ${query}` }), + { + headers: { 'Content-Type': 'application/json' }, + }, + ); +} +``` + +### [4.3 Cabeceras y cookies](#43-cabeceras-y-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. Usando helpers de 'next/headers' + const cookieStore = await cookies(); + const token = cookieStore.get('token'); + + const headersList = await headers(); + const referer = headersList.get('referer'); + + // 2. Usando las Web APIs estándar + const userAgent = request.headers.get('user-agent'); + + return new Response(JSON.stringify({ token, referer, userAgent }), { + headers: { 'Content-Type': 'application/json' }, + }); +} +``` + +Las funciones `cookies()` y `headers()` pueden ser útiles si planeas reutilizar lógica compartida en otro código del lado del servidor en Next.js. Notarás que Next.js también proporciona `NextRequest` y `NextResponse` que extienden las Web APIs base. + +[5\. Rutas dinámicas](#5-rutas-dinámicas) +--------------------------------------- + +Para crear rutas dinámicas (ej. `/api/users/:id`), usa **Segmentos Dinámicos** en tu estructura de carpetas: + +``` +app +└── api + └── users + └── [id] + └── route.ts +``` + +Este archivo corresponde a una URL como `/api/users/123`, donde `123` se captura como parámetro. + +```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; + // ej. Consulta una base de datos para el usuario con ID `id` + return new Response(JSON.stringify({ id, name: `Usuario ${id}` }), { + status: 200, + headers: { 'Content-Type': 'application/json' }, + }); +} + +export async function DELETE( + request: NextRequest, + { params }: { params: Promise<{ id: string }> }, +) { + const id = (await params).id; + // ej. Elimina usuario con ID `id` en la base de datos + return new Response(null, { status: 204 }); +} +``` + +Aquí, `params.id` te da el segmento dinámico. + +[6\. Usando Next.js como proxy o capa de reenvío](#6-usando-nextjs-como-proxy-o-capa-de-reenvío) +-------------------------------------------------------------------------------------------------- + +Un escenario común es **hacer de proxy** para un servicio backend existente. Puedes autenticar solicitudes, manejar logs o transformar datos antes de enviarlos a un servidor remoto o backend: + +```ts filename="app/api/external/route.ts" +import { NextRequest } from 'next/server'; + +export async function GET(request: NextRequest) { + const response = await fetch('https://example.com/api/data', { + // Opcional: reenvía algunas cabeceras, añade tokens de auth, etc. + headers: { Authorization: `Bearer ${process.env.API_TOKEN}` }, + }); + + // Transforma o reenvía la respuesta + const data = await response.json(); + const transformed = { ...data, source: 'proxied-through-nextjs' }; + + return new Response(JSON.stringify(transformed), { + headers: { 'Content-Type': 'application/json' }, + }); +} +``` + +Ahora tus clientes solo necesitan llamar a `/api/external`, y Next.js manejará el resto. Esto a veces también se llama "Backend for Frontend" o BFF. + +[7\. Construyendo lógica de "middleware" compartida](#7-construyendo-lógica-de-middleware-compartida) +----------------------------------------------------------------------------- + +Si deseas aplicar la misma lógica (ej. verificaciones de autenticación, logs) en múltiples Route Handlers, puedes crear funciones reutilizables que envuelvan tus handlers: + +```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: 'No autorizado' }), { + status: 401, + headers: { 'Content-Type': 'application/json' }, + }); + } + + // Si está autenticado, llama al handler original + return handler(req, context); + }; +} +``` + +Luego en tu 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: 'Aquí hay dragones' }), { + headers: { 'Content-Type': 'application/json' }, + }); +} + +export const GET = withAuth(secretGET); +``` + +[8\. Consideraciones de despliegue y "Modo SPA"](#8-consideraciones-de-despliegue-y-modo-spa) +----------------------------------------------------------------------------------------- + +### [8.1 Despliegue estándar en Node.js](#81-despliegue-estándar-en-nodejs) + +El despliegue estándar del servidor Next.js usando `next start` te permite usar características como Route Handlers, Server Components, Middleware y más—aprovechando información dinámica en tiempo de solicitud. + +No se requiere configuración adicional. Consulta [Despliegue](/docs/app/building-your-application/deploying) para más detalles. + +### [8.2 Exportación estática/SPA](#82-exportación-estáticaspá) + +Next.js también soporta exportar todo tu sitio como una [Single-Page Application (SPA) estática](/docs/app/building-your-application/upgrading/single-page-applications). + +Puedes habilitar esto configurando: + +```ts filename="next.config.ts" +import type { NextConfig } from 'next'; + +const nextConfig: NextConfig = { + output: 'export', +}; + +export default nextConfig; +``` + +En **modo de exportación estática**, Next.js generará HTML, CSS y JS puramente estáticos. **No puedes ejecutar código del lado del servidor** (como endpoints API). Si aún necesitas una API, tendrías que alojarla por separado (ej., un servidor Node.js independiente). + +> **Nota:** +> +> * **Los Route Handlers GET** [pueden exportarse estáticamente](/docs/app/building-your-application/deploying/static-exports#route-handlers) si no dependen de datos de solicitud dinámicos. Se convierten en archivos estáticos en tu carpeta `out`. +> * **Todas las demás características del servidor** (solicitudes dinámicas, reescritura de cookies, etc.) **no** están soportadas en una exportación SPA pura. + +### [8.3 Implementación de APIs en Vercel](#83-deploying-apis-on-vercel) + +Si estás implementando tu aplicación Next.js en Vercel, tenemos una [guía sobre implementación de APIs](https://vercel.com/guides/hosting-backend-apis). Esto incluye otras características de Vercel como [limitación de tasa programática](https://vercel.com/docs/security/vercel-waf/rate-limiting-sdk) a través del Firewall de Vercel. Vercel también ofrece [Trabajos Cron](https://vercel.com/docs/cron-jobs/manage-cron-jobs), que son comúnmente necesarios con enfoques de API. + +[9\. Cuándo omitir la creación de un endpoint de API](#9-when-to-skip-creating-an-api-endpoint) +----------------------------------------------------------------------------------------------- + +Con los **Componentes de Servidor React** del App Router, puedes obtener datos directamente en el servidor sin exponer un endpoint público: + +```tsx filename="app/users/page.tsx" +// (Componente de Servidor) +export default async function UsersPage() { + // Este fetch se ejecuta en el servidor (no se necesita código del lado del cliente aquí) + const res = await fetch('https://api.example.com/users'); + const data = await res.json(); + + return ( +
+

Usuarios

+
    + {data.map((user: any) => ( +
  • {user.name}
    • + ))} +
+
+ ); +} +``` + +Si tus datos solo se usan dentro de tu aplicación Next.js, es posible que no necesites una API pública en absoluto. + +[10\. Integrando Todo](#10-putting-it-all-together) +--------------------------------------------------- + +1. **Crea un nuevo proyecto Next.js**: `npx create-next-app@latest --api`. +2. **Agrega Manejadores de Ruta** dentro del directorio `app/` (ej., `app/api/users/route.ts`). +3. **Exporta métodos HTTP** (`GET`, `POST`, `PUT`, `DELETE`, etc.) en el mismo archivo. +4. **Usa APIs Web Estándar** para interactuar con el objeto `Request` y devolver un `Response`. +5. **Construye una API pública** si necesitas que otros clientes consuman tus datos o para intermediar un servicio backend. +6. **Obtén** tus nuevas rutas de API desde el cliente (ej., dentro de un Componente de Cliente o con `fetch('/api/...')`). +7. O **omite crear una API** por completo si un Componente de Servidor puede simplemente obtener los datos. +8. **Agrega un "middleware" compartido** (ej., `withAuth()`) para autenticación u otra lógica repetitiva. +9. **Implementa** en un entorno compatible con Node.js para características de servidor, o **exporta** estáticamente si solo necesitas una SPA estática. + +[Conclusión](#conclusion) +------------------------- + +Usar el **App Router** y los **Manejadores de Ruta** de Next.js te brinda una forma flexible y moderna de construir APIs que adoptan directamente la **Plataforma Web**. Puedes: + +* **Crear una API pública completa** para ser compartida por web, móvil o clientes de terceros. +* **Intermediar** y personalizar llamadas a servicios externos existentes. +* **Implementar** una capa de "middleware" reutilizable para autenticación, registro o cualquier lógica repetitiva. +* **Enrutar dinámicamente** solicitudes usando la estructura de carpetas de segmento `[id]`. + +[Preguntas Frecuentes](#frequently-asked-questions) +--------------------------------------------------- + +### [¿Qué hay sobre las Acciones de Servidor?](#what-about-server-actions) + +Puedes pensar en las [Acciones de Servidor](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) como rutas de API `POST` generadas automáticamente que pueden ser llamadas desde el cliente. + +Están diseñadas para operaciones de mutación, como crear, actualizar o eliminar datos. Llamas a una Acción de Servidor como una función JavaScript normal, en lugar de hacer un `fetch` explícito a una ruta de API definida. + +Aunque _sí_ hay una solicitud de red ocurriendo, no necesitas gestionarla explícitamente. La ruta URL se genera automáticamente y está [encriptada](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#security), por lo que no puedes acceder manualmente a una ruta como `/api/users` en el navegador. + +Si planeas usar Acciones de Servidor _y_ exponer una API pública, recomendamos mover la lógica principal a una [Capa de Acceso a Datos](/blog/security-nextjs-server-components-actions) y llamar la misma lógica tanto desde la Acción de Servidor como desde la ruta de API. + +### [¿Puedo usar TypeScript con Manejadores de Ruta?](#can-i-use-typescript-with-route-handlers) + +Sí, puedes usar TypeScript con Manejadores de Ruta. Por ejemplo, definiendo los tipos `Request` y `Response` en tu archivo `route`. + +Aprende más sobre [TypeScript con Next.js](/docs/app/api-reference/config/typescript). + +### [¿Cuáles son las mejores prácticas para autenticación?](#what-are-the-best-practices-for-authentication) + +Aprende más en nuestra [documentación de autenticación](/docs/app/building-your-application/authentication). diff --git a/apps/docs/content/es/blog/composable-caching.mdx b/apps/docs/content/es/blog/composable-caching.mdx new file mode 100644 index 00000000..b9a6833d --- /dev/null +++ b/apps/docs/content/es/blog/composable-caching.mdx @@ -0,0 +1,202 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:19:19.902Z +title: Almacenamiento en caché componible con Next.js +description: Conozca más sobre el diseño de la API y los beneficios de '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 +--- + +Estamos trabajando en un modelo de almacenamiento en caché simple y potente para Next.js. En una publicación anterior, hablamos sobre [nuestra experiencia con el caché](/blog/our-journey-with-caching) y cómo llegamos a la directiva `'use cache'`. + +Esta publicación discutirá el diseño de la API y los beneficios de `'use cache'`. + +[¿Qué es `'use cache'`?](#what-is-use-cache) +-------------------------------------------- + +`'use cache'` hace que tu aplicación sea más rápida almacenando en caché datos o componentes según sea necesario. + +Es una "directiva" de JavaScript —un literal de cadena que agregas en tu código— que le indica al compilador de Next.js que entre en un "límite" diferente. Por ejemplo, pasar del servidor al cliente. + +Esta es una idea similar a las directivas de React como `'use client'` y `'use server'`. Las directivas son instrucciones del compilador que definen dónde debe ejecutarse el código, permitiendo que el framework optimice y orqueste piezas individuales por ti. + +[¿Cómo funciona?](#how-does-it-work) +-------------------------------------- + +Comencemos con un ejemplo simple: + +``` +async function getUser(id) { + 'use cache'; + let res = await fetch(`https://api.vercel.app/user/${id}`); + return res.json(); +} +``` + +Detrás de escenas, Next.js transforma este código en una función del servidor debido a la directiva `'use cache'`. Durante la compilación, se encuentran las "dependencias" de esta entrada de caché y se usan como parte de la clave de caché. + +Por ejemplo, `id` se convierte en parte de la clave de caché. Si llamamos a `getUser(1)` múltiples veces, devolvemos la salida memorizada de la función del servidor en caché. Cambiar este valor creará una nueva entrada en el caché. + +Veamos un ejemplo usando la función en caché en un componente del servidor con un [cierre](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 ; +} +``` + +Este ejemplo es más difícil. ¿Puedes identificar todas las dependencias que deben ser parte de la clave de caché? + +Los argumentos `index` y `limit` tienen sentido —si estos valores cambian, seleccionamos un segmento diferente de las notificaciones. Sin embargo, ¿qué pasa con el `id` del usuario? Su valor proviene del componente padre. + +El compilador puede entender que `getNotifications` también depende de `id`, y su valor se incluye automáticamente en la clave de caché. Esto evita toda una categoría de problemas de caché por dependencias incorrectas o faltantes en la clave de caché. + +[¿Por qué no usar una función de caché?](#why-not-use-a-cache-function) +-------------------------------------------------------------- + +Revisemos el último ejemplo. ¿Podríamos usar una función `cache()` en lugar de una directiva? + +``` +function Profile({ id }) { + async function getNotifications(index, limit) { + return await cache(async () => { + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + // ¡Ups! ¿Dónde incluimos id en la clave de caché? + .where(eq(notifications.userId, id)); + }); + } + + return ; +} +``` + +Una función `cache()` no podría mirar dentro del cierre y ver que el valor de `id` debería ser parte de la clave de caché. Tendrías que especificar manualmente que `id` es parte de tu clave. Si olvidas hacerlo o lo haces incorrectamente, arriesgas colisiones de caché o datos obsoletos. + +Los cierres pueden capturar todo tipo de variables locales. Un enfoque ingenuo podría accidentalmente incluir (u omitir) variables que no pretendías. Eso puede llevar a almacenar en caché los datos incorrectos, o podría arriesgar la contaminación del caché si información sensible se filtra en la clave de caché. + +`'use cache'` le da al compilador suficiente contexto para manejar cierres de manera segura y producir claves de caché correctamente. Una solución solo en tiempo de ejecución, como `cache()`, requeriría que hicieras todo manualmente —y es fácil cometer errores. En contraste, una directiva puede analizarse estáticamente para manejar de manera confiable todas tus dependencias bajo el capó. + +[¿Cómo se manejan los valores de entrada no serializables?](#how-are-non-serialized-input-values-handled) +-------------------------------------------------------------------------------------------- + +Tenemos dos tipos diferentes de valores de entrada para almacenar en caché: + +* **Serializables**: Aquí, "serializable" significa que una entrada puede convertirse en un formato estable basado en cadenas _sin_ perder significado. Mientras que muchas personas piensan primero en `JSON.stringify`, en realidad usamos la serialización de React (por ejemplo, a través de Componentes del Servidor) para manejar un rango más amplio de entradas —incluyendo promesas, estructuras de datos circulares y otros objetos complejos. Esto va más allá de lo que JSON simple puede hacer. +* **No serializables**: Estas entradas no son parte de la clave de caché. Cuando intentamos almacenar estos valores en caché, devolvemos una "referencia" del servidor. Esta referencia luego es usada por Next.js para restaurar el valor original en tiempo de ejecución. + +Digamos que recordamos incluir `id` en la clave de caché: + +``` +await cache(async () => { + return await db + .select() + .from(notifications) + .limit(limit) + .offset(index) + .where(eq(notifications.userId, id)); +}, [id, index, limit]); +``` + +Esto funciona si los valores de entrada pueden serializarse. Pero si `id` fuera un elemento React o un valor más complejo, tendríamos que serializar manualmente las claves de entrada. Considera un componente del servidor que obtiene el usuario actual basado en una propiedad `id`: + +``` +async function Profile({ id, children }) { + 'use cache'; + const user = await getUser(id); + + return ( + <> +

{user.name}

+ {/* Cambiar children no rompe el caché... ¿por qué? */} + {children} + + ); +} +``` + +Recorramos cómo funciona esto: + +1. Durante la compilación, Next.js ve la directiva `'use cache'` y transforma el código para crear una función especial del servidor que soporta caché. No ocurre almacenamiento en caché durante la compilación, sino que Next.js está configurando el mecanismo necesario para el caché en tiempo de ejecución. +2. Cuando tu código llama a la "función de caché", Next.js serializa los argumentos de la función. Cualquier cosa que no sea directamente serializable, como JSX, se reemplaza con un marcador de "referencia". +3. Next.js verifica si existe un resultado en caché para los argumentos serializados dados. Si no se encuentra ningún resultado, la función calcula el nuevo valor para almacenar en caché. +4. Después de que la función termina, el valor de retorno se serializa. Las partes no serializables del valor de retorno se convierten nuevamente en referencias. +5. El código que llamó a la función de caché deserializa la salida y evalúa las referencias. Esto permite a Next.js intercambiar las referencias con sus objetos o valores reales, lo que significa que entradas no serializables como `children` pueden mantener sus valores originales, no almacenados en caché. + +Esto significa que podemos almacenar en caché de manera segura _solo_ el componente `` y no los hijos. En renderizados posteriores, `getUser()` no se llama nuevamente. El valor de `children` podría ser dinámico o un elemento almacenado en caché por separado con una vida útil de caché diferente. Esto es almacenamiento en caché componible. + +[Esto parece familiar...](#this-seems-familiar) +-------------------------------------------- + +Si estás pensando "eso se siente como el mismo modelo de composición de servidor y cliente"— tienes toda la razón. A veces esto se llama el patrón "donut": + +* La parte **externa** de la dona es un componente del servidor que maneja la obtención de datos o lógica pesada. +* El **hueco** en el centro es un componente hijo que podría tener algo de interactividad + +```tsx filename="app/page.tsx" +export default function Page() { + return ( + + {/* Crea un hueco hacia el cliente */} + + + ); +} +``` + +`'use cache'` es lo mismo. La dona es el valor en caché del componente externo y el hueco son las referencias que se llenan en tiempo de ejecución. Es por eso que cambiar `children` no invalida toda la salida en caché. Los hijos son solo algunas referencias que se llenan más tarde. + +[¿Qué pasa con el etiquetado y la invalidación?](#what-about-tagging-and-invalidation) +---------------------------------------------------------------------------- + +Puedes definir la vida del caché con diferentes [perfiles](/docs/app/api-reference/functions/cacheLife). Incluimos un conjunto de perfiles predeterminados, pero puedes definir tus propios valores personalizados si lo deseas. + +``` +async function getUser(id) { + 'use cache'; + cacheLife('hours'); + let res = await fetch(`https://api.vercel.app/user/${id}`); + return res.json(); +} +``` + +Para invalidar una entrada de caché específica, puedes [etiquetar el caché](/docs/app/api-reference/functions/cacheTag) y luego llamar a `revalidateTag()`. Un patrón poderoso es que puedes etiquetar el caché _después_ de haber obtenido tus datos (por ejemplo, desde un CMS): + +``` +async function getPost(postId) { + 'use cache'; + let res = await fetch(`https://api.vercel.app/blog/${postId}`); + let data = await res.json(); + cacheTag(postId, data.authorId); + return data; +} +``` + +[Simple y poderoso](#simple-and-powerful) +------------------------------------------- + +Nuestro objetivo con `'use cache'` es hacer que la lógica de almacenamiento en caché sea simple _y_ poderosa. + +* **Simple:** Puedes crear entradas de caché con razonamiento local. No necesitas preocuparte por efectos secundarios globales, como entradas olvidadas en la clave de caché o cambios no intencionados en otras partes de tu código base. +* **Poderoso:** Puedes almacenar en caché más que solo código estáticamente analizable. Por ejemplo, valores que podrían cambiar en tiempo de ejecución, pero aún así deseas almacenar en caché el resultado después de que haya sido evaluado. + +`'use cache'` sigue siendo **experimental** dentro de Next.js. Nos encantaría recibir tus comentarios iniciales mientras lo pruebas. + +[Conoce más en la documentación](/docs/app/api-reference/directives/use-cache). \ No newline at end of file diff --git a/apps/docs/content/es/blog/create-next-app.mdx b/apps/docs/content/es/blog/create-next-app.mdx new file mode 100644 index 00000000..11f17e87 --- /dev/null +++ b/apps/docs/content/es/blog/create-next-app.mdx @@ -0,0 +1,39 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:17:53.099Z +title: Presentando Create Next App +description: >- + Hoy tenemos el placer de presentar el nuevo Create Next App. Esta herramienta configura + una aplicación moderna de React con Next.js mediante un solo comando. +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 +--- + +Hoy tenemos el placer de presentar el nuevo Create Next App. + +Create Next App configura una aplicación moderna de React impulsada por Next.js con un solo comando. + +Para comenzar, solo debe ejecutar: + +```bash filename="Terminal" +npx create-next-app +``` + +Create Next App ha sido reconstruido desde cero para ofrecer la mejor experiencia de desarrollo posible: + +* **Experiencia interactiva**: Ejecutar `npx create-next-app` (sin argumentos) ahora inicia una experiencia interactiva que lo guía en la configuración de un proyecto. +* **Cero dependencias**: Inicializar un proyecto ahora es tan rápido como **un segundo**. Create Next App no tiene dependencias y se instala en **solo 604 kB**. Antes de nuestras optimizaciones, la versión anterior pesaba **5.38 MB**. ¡Eso es una reducción de más de **4.7 MB**! +* **Soporte sin conexión**: Create Next App detectará automáticamente si está offline y configurará su proyecto usando la caché local de paquetes. +* **Nueva plantilla de proyecto predeterminada**: Create Next App utiliza una nueva plantilla diseñada para aplicaciones modernas de Next.js. Como ahora se mantiene junto con Next.js, esta plantilla siempre estará actualizada con la última versión. +* **Soporte para ejemplos**: Puede iniciar su aplicación usando un ejemplo de la [colección de ejemplos de Next.js](https://github.com/vercel/next.js/tree/canary/examples) (ej. `npx create-next-app --example api-routes`). +* **Probado**: Este paquete es parte del monorepo de Next.js y se prueba con el mismo conjunto de pruebas de integración que Next.js, garantizando su correcto funcionamiento en cada lanzamiento. + +Create Next App era anteriormente un proyecto [mantenido por la comunidad](https://open.segment.com/create-next-app/), pero consideramos importante gestionar la primera impresión de Next.js, especialmente al recomendarlo en la [colección de ejemplos](https://github.com/vercel/next.js/tree/canary/examples). + +Trabajamos con [Segment](https://segment.com/) para transferir la propiedad del paquete, y estamos muy agradecidos por su gestión previa, especialmente por [Fouad Matin](https://twitter.com/fouadmatin). \ No newline at end of file diff --git a/apps/docs/content/es/blog/incremental-adoption.mdx b/apps/docs/content/es/blog/incremental-adoption.mdx new file mode 100644 index 00000000..e15eb2bf --- /dev/null +++ b/apps/docs/content/es/blog/incremental-adoption.mdx @@ -0,0 +1,109 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:18:36.436Z +title: Adopción incremental de Next.js +description: >- + Aprende diferentes estrategias para adoptar Next.js de forma incremental en tu flujo de desarrollo. +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/) ha sido diseñado para una adopción gradual. Con Next.js, puedes seguir utilizando tu código existente y añadir tanto React como necesites (o tan poco). Al comenzar con pequeños cambios e ir añadiendo más páginas de forma incremental, puedes evitar interrumpir el desarrollo de funcionalidades al eludir una reescritura completa. + +Muchas empresas necesitan modernizar su stack tecnológico para reducir costos, aumentar la productividad de los desarrolladores y ofrecer la mejor experiencia a sus clientes. El desarrollo basado en componentes ha mejorado enormemente la velocidad de despliegue y la reutilización en bases de código modernas. + +Y con más de [8 millones de descargas/mes](https://www.npmtrends.com/react), React es la opción líder en desarrollo basado en componentes. Next.js, el framework de React para producción, te permite adoptar React de forma incremental. + +[Motivación](#motivation) +------------------------- + +En un mundo cada vez más móvil, mejorar y monitorear tus [Core Web Vitals](/analytics) es crucial para el éxito. Es probable que tus clientes estén distribuidos por todo el mundo con velocidades de internet variables. Cada segundo (o milisegundo) adicional que esperan para que una página cargue o se complete una acción puede marcar la diferencia entre una venta, una impresión o una conversión. + +Si estás modernizando tu stack tecnológico, podrías enfrentar desafíos como: + +* Tu aplicación tiene años de código heredado que es difícil de entender y llevaría años (y millones de dólares) reescribir completamente. +* Los tiempos de carga de tus páginas siguen aumentando a medida que crece el tamaño y complejidad de la aplicación. Páginas simples de marketing son tan lentas como las páginas más complejas. +* Estás intentando escalar tu equipo de desarrollo, pero enfrentas problemas al añadir más desarrolladores a la base de código existente. +* Tienes procesos obsoletos de CI/CD y DevOps, lo que disminuye la productividad y dificulta implementar cambios nuevos de forma segura y confiable. +* Tu aplicación no es responsive para dispositivos móviles y es imposible actualizar los estilos globales sin romper otras partes de la aplicación. + +Sabes que necesitas hacer _algo_, pero puede ser abrumador entender [por dónde empezar](https://www.psychologytoday.com/us/blog/mindfully-present-fully-alive/201804/the-only-way-eat-elephant). Al adoptar Next.js de forma incremental, puedes comenzar a resolver estos problemas y transformar tu aplicación. Analicemos algunas estrategias para integrar Next.js en tu stack tecnológico existente. + +[Estrategias](#estrategias) +------------------------- + +### [Subruta](#subpath) + +La primera estrategia es configurar tu servidor o proxy para que todo bajo una subruta específica apunte a una aplicación Next.js. Por ejemplo, tu sitio web existente podría estar en `example.com`, y podrías configurar tu proxy para que `example.com/tienda` sirva una tienda e-commerce con Next.js. + +Usando [`basePath`](/docs/pages/api-reference/next-config-js/basePath), puedes configurar los assets y enlaces de tu aplicación Next.js para que funcionen automáticamente con tu nueva subruta `/tienda`. Como cada página en Next.js es su propia [ruta independiente](/docs/pages/building-your-application/routing), páginas como `pages/productos.js` se enrutarán a `example.com/tienda/productos` en tu aplicación. + +```js filename="next.config.js" +module.exports = { + basePath: '/tienda', +}; +``` + +Para aprender más sobre `basePath`, consulta nuestra [documentación](/docs/pages/api-reference/next-config-js/basePath). + +(**Nota:** Esta funcionalidad se introdujo en Next.js 9.5 y versiones posteriores. Si usas versiones anteriores, actualiza antes de probarla.) + +### [Rewrites](#rewrites) + +La segunda estrategia es crear una nueva aplicación Next.js que apunte a la URL raíz de tu dominio. Luego, puedes usar [`rewrites`](/docs/pages/api-reference/next-config-js/rewrites) en `next.config.js` para que algunas subrutas sean proxyadas a tu aplicación existente. + +Por ejemplo, supongamos que creaste una aplicación Next.js para servir desde `example.com` con el siguiente `next.config.js`. Ahora, las solicitudes para las páginas que hayas añadido a esta aplicación Next.js (ej. `/about` si añadiste `pages/about.js`) serán manejadas por Next.js, y las solicitudes para cualquier otra ruta (ej. `/dashboard`) serán proxyadas a `proxy.example.com`. + +```js filename="next.config.js" +module.exports = { + async rewrites() { + return [ + // necesitamos definir un rewrite sin efecto para activar la verificación + // de todas las páginas/archivos estáticos antes de intentar el proxy + { + source: '/:path*', + destination: '/:path*', + }, + { + source: '/:path*', + destination: `https://proxy.example.com/:path*`, + }, + ]; + }, +}; +``` + +Para aprender más sobre rewrites, consulta nuestra [documentación](/docs/pages/api-reference/next-config-js/rewrites). + +### [Micro-frontends con Monorepos y Subdominios](#micro-frontends-with-monorepos-and-subdomains) + +Next.js y [Vercel](https://vercel.com) facilitan la adopción de [micro-frontends](https://martinfowler.com/articles/micro-frontends.html) y el despliegue como [Monorepo](https://vercel.com/blog/monorepos). Esto te permite usar [subdominios](https://es.wikipedia.org/wiki/Subdominio) para adoptar nuevas aplicaciones de forma incremental. Algunos beneficios de los micro-frontends: + +* Bases de código más pequeñas, cohesivas y mantenibles. +* Organizaciones más escalables con equipos autónomos y desacoplados. +* Capacidad para actualizar o incluso reescribir partes del frontend de forma más incremental. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/light-arch.png) + +> Arquitectura de un monorepo desplegado en Vercel. + +Una vez configurado tu monorepo, envía cambios a tu repositorio Git como siempre y verás los commits desplegados en los proyectos de Vercel que hayas conectado. Di adiós a los procesos obsoletos de CI/CD. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/dark-comment.png) + +> Ejemplo de URLs de despliegue proporcionadas por una integración con Git. + +[Conclusión](#conclusion) +------------------------- + +Next.js fue diseñado para una adopción incremental en tu stack tecnológico existente. La plataforma Vercel lo convierte en una experiencia colaborativa con vistas previas de despliegue para cada cambio, integrando perfectamente con GitHub, GitLab y Bitbucket. + +* Previsualiza cambios al instante localmente con [Fast Refresh](/docs/architecture/fast-refresh), aumentando la productividad. +* Envía cambios para crear un [Branch Preview](https://vercel.com/github), optimizado para colaboración con stakeholders. +* Despliega en producción con [Vercel](https://vercel.com) al fusionar el PR. Sin DevOps complicados. + +Para aprender más, lee sobre [subrutas](/docs/pages/api-reference/next-config-js/basePath) y [rewrites](/docs/pages/api-reference/next-config-js/rewrites) o [despliega un ejemplo con 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/es/blog/june-2023-update.mdx b/apps/docs/content/es/blog/june-2023-update.mdx new file mode 100644 index 00000000..86bd6608 --- /dev/null +++ b/apps/docs/content/es/blog/june-2023-update.mdx @@ -0,0 +1,148 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-02T19:19:27.252Z +title: Actualización del Enrutador de Aplicaciones de Next.js +description: >- + El equipo de Next.js se está enfocando en el rendimiento, la estabilidad y la + experiencia del desarrollador para los próximos meses. +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 +--- + +El Enrutador de Aplicaciones (App Router) representa una nueva base para el futuro de Next.js, pero reconocemos que hay oportunidades para mejorar la experiencia. Nos gustaría compartir una actualización sobre nuestras prioridades actuales. + +Para las próximas versiones de Next.js, nos estamos enfocando en las siguientes áreas: + +* **Mejorar el rendimiento** +* **Mejorar la estabilidad** +* **Mejorar la educación para desarrolladores** + +[El Enrutador de Aplicaciones](#the-app-router) +--------------------------------- + +Primero, es útil proporcionar algo de contexto sobre cómo se ha diseñado el Enrutador de Aplicaciones. + +### [Superando el Enrutador de Páginas al alinearse con React](#growing-beyond-the-pages-router-by-aligning-with-react) + +A medida que vimos una mayor adopción y aplicaciones a mayor escala construidas con Next.js, recibimos comentarios de la comunidad e identificamos áreas donde comenzamos a alcanzar los límites del Enrutador de Páginas (Pages Router). + +Más notablemente, el Enrutador de Páginas de Next.js no fue diseñado para streaming, un pilar fundamental en React moderno, que nos ayuda a abordar las limitaciones que enfrentábamos y materializar nuestra visión a largo plazo para Next.js. + +Crear APIs de framework compatibles con streaming para la obtención de datos, carga de recursos y metadatos de página, así como aprovechar los nuevos primitivos de React, requirió grandes cambios en la arquitectura central de Next.js. + +Aprovechamos la oportunidad para construir sobre las [últimas características concurrentes de React](https://react.dev/blog/2023/05/03/react-canaries), como Componentes del Servidor (Server Components), Suspense y más, que han sido [diseñadas para arquitecturas de streaming](https://github.com/reactwg/react-18/discussions/37). + +### [La adopción incremental no es negociable](#incremental-adoption-is-non-negotiable) + +No queríamos que nuestra comunidad tuviera que reconstruir sus aplicaciones desde cero para actualizar a la última versión de Next.js. Creemos que la adopción incremental es la mejor estrategia para evolucionar aplicaciones con el tiempo. + +* **Migración incremental por ruta**: Sin una reescritura mayor de su aplicación, puede mover una sola ruta de su aplicación al Enrutador de Aplicaciones y comenzar a aprovechar nuevas características a su propio ritmo. Consulte nuestra [guía de adopción incremental](/docs/app/building-your-application/upgrading/app-router-migration) o [vea un tutorial](https://www.youtube.com/watch?v=YQMSietiFm0). +* **Reversión fácil**: Si no está satisfecho con el rendimiento o la experiencia del desarrollador del Enrutador de Aplicaciones, puede revertir fácilmente al Enrutador de Páginas para esa ruta específica. + +Estamos explorando más oportunidades para hacer que la adopción incremental sea aún más fácil. + +### [Camino hacia la estabilidad](#road-to-stability) + +Comenzamos a construir el Enrutador de Aplicaciones de Next.js hace más de un año y hemos estado lanzando constantemente nuevas características y mejoras desde entonces. + +* **Anuncio inicial**: En mayo de ese año, [publicamos un RFC](/blog/layouts-rfc) para delinear nuestros planes para hacer que el enrutamiento y los diseños sean más flexibles. +* **Beta temprana**: En Next.js 13, lanzamos la primera versión del Enrutador de Aplicaciones, permitiendo que la comunidad lo probara y proporcionara comentarios tempranos. +* **API estable**: Respondiendo a los comentarios, enfocamos nuestros esfuerzos en finalizar la API central. En la versión 13.4, marcamos la API central del Enrutador de Aplicaciones como estable y lista para una adopción más amplia. + +[Nuestro enfoque actual](#our-current-focus) +--------------------------------------- + +Marcar la estabilidad le indicó a la comunidad que la API central estaba definida y no sufriría cambios importantes que requirieran reescrituras. + +Desde entonces, hemos recibido muchos comentarios valiosos y el aumento en la adopción ha revelado inevitablemente errores y oportunidades para seguir mejorando. + +Queremos que sepa que **aún no estamos satisfechos** con la experiencia de usar el Enrutador de Aplicaciones y es nuestra máxima prioridad en adelante. Así que hablemos del trabajo que estamos haciendo para mejorar esta experiencia. + +### [Mejorando el rendimiento](#improving-performance) + +En los próximos meses, nos enfocamos en tres aspectos del rendimiento: velocidad de iteración local, tiempos de compilación en producción y rendimiento sin servidor (serverless). + +#### [Rendimiento en desarrollo local](#local-development-performance) + +A medida que Next.js ha madurado y el tamaño de las aplicaciones construidas con él ha crecido, hemos ido reemplazando gradualmente partes de su arquitectura subyacente con herramientas más rápidas y escalables. + +* **Progreso de migración**: Comenzamos reemplazando Babel _(compilación)_ y Terser _(minificación)_ con [SWC](/docs/architecture/nextjs-compiler). Esto ha ayudado a mejorar las velocidades de iteración local y los tiempos de compilación en producción. + +* **Inversión a largo plazo**: Mantener un gran rendimiento de Fast Refresh independientemente del tamaño de las aplicaciones significa hacer que Next.js opere de la manera más incremental posible durante el desarrollo local, compilando y empaquetando solo el código necesario. + + Es por eso que actualmente estamos trabajando en reemplazar webpack _(empaquetado)_ con [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), que se construye sobre un motor de cálculo incremental de bajo nivel que permite almacenamiento en caché hasta el nivel de funciones individuales. + + Las aplicaciones Next.js que migren a Turbopack verán mejoras sostenidas en la velocidad de Fast Refresh incluso a medida que crecen en tamaño. + + En los últimos meses, el equipo de Turbo se ha enfocado en mejorar el rendimiento de Turbopack y el soporte para todas las características de Next.js y las APIs del Enrutador de Aplicaciones. + + Turbopack está actualmente [disponible en beta](/docs/architecture/turbopack) (`next dev --turbo`). + +* **Mejorando la arquitectura actual**: Además de invertir en el futuro, seguimos haciendo mejoras de rendimiento a nuestra arquitectura webpack existente. + + Para ciertas aplicaciones Next.js, especialmente aquellas que actualizan miles de módulos, hemos visto informes de inconsistencia con el desarrollo local y Fast Refresh. Estamos trabajando para mejorar el rendimiento y la confiabilidad aquí. Por ejemplo, recientemente agregamos configuraciones predefinidas (`modularizeImports`) para manejar [grandes bibliotecas de iconos](https://github.com/vercel/next.js/pull/50900) que podrían forzar accidentalmente a que miles de módulos se recarguen en cada solicitud. + + +#### [Rendimiento en tiempo de compilación](#build-time-performance) + +También estamos trabajando en compilaciones de producción con Turbopack (`next build --turbo`) y hemos [comenzado a implementar](https://github.com/vercel/next.js/pull/51546) las primeras piezas de este trabajo. Espere más actualizaciones sobre esto en los próximos lanzamientos. + +#### [Rendimiento en producción](#production-performance) + +Finalmente, en Vercel, estamos trabajando para optimizar el rendimiento y el uso de memoria de las Funciones de Vercel [definidas a través del código de la aplicación Next.js](https://vercel.com/blog/framework-defined-infrastructure), asegurando tiempos de inicio en frío mínimos mientras se mantienen los beneficios de una arquitectura serverless escalable. Este trabajo ha resultado en nuevas [capacidades de trazado](/docs/app/building-your-application/optimizing/open-telemetry) (experimental) en Next.js y exploraciones tempranas de herramientas de desarrollo del lado del servidor. + +[Mejorando la estabilidad](#improving-stability) +------------------------------------------- + +El Enrutador de Páginas ha existido durante seis años. El lanzamiento del Enrutador de Aplicaciones significó la introducción de nuevas APIs que aún son jóvenes, con solo seis meses de uso. Hemos avanzado mucho en poco tiempo, pero todavía hay oportunidades para mejorar a medida que aprendemos más de nuestra comunidad y cómo la están usando. + +Agradecemos la disposición de la comunidad para adoptar con entusiasmo el Enrutador de Aplicaciones y proporcionar comentarios. Ha habido una serie de informes de errores que estamos investigando y estamos agradecidos por las reproducciones mínimas que han creado para ayudar a aislar problemas y verificar correcciones. + +Desde la versión 13.4, ya hemos corregido varios errores de alto impacto relacionados con la estabilidad que están disponibles en la última versión de parche (`13.4.7`). Continuaremos enfocándonos en el rendimiento y la estabilidad con alta intensidad. + +[Mejorando la educación para desarrolladores](#improving-developer-education) +--------------------------------------------------------------- + +Si bien creemos que las nuevas características del Enrutador de Aplicaciones y React moderno son poderosas, también requieren educación y documentación adicionales para ayudar a enseñar estos nuevos conceptos. + +### [Características de Next.js](#nextjs-features) + +Hemos estado trabajando durante el último año para reescribir la documentación de Next.js desde cero. Este trabajo ahora está disponible en [nextjs.org/docs](/docs). Nos gustaría destacar algunas [piezas importantes](https://twitter.com/delba_oliveira/status/1664323492077256704): + +* **Alternancia entre Páginas y Aplicación:** Puede cambiar entre aprender el Enrutador de Páginas o el Enrutador de Aplicaciones usando el botón en el lado izquierdo de la documentación. Además, puede filtrar los resultados de búsqueda según su elección de enrutador. +* **Contenido y arquitectura de información mejorados:** Casi todas las páginas de la documentación del Enrutador de Aplicaciones han sido actualizadas, incluyendo una estructura más clara y cohesión entre páginas, y cientos de nuevas ilustraciones para explicar visualmente cómo funciona Next.js. +* **Más por venir**: Tenemos más trabajo por hacer aquí. El equipo de Experiencia del Desarrollador en Vercel está trabajando duro para proporcionar recursos de aprendizaje adicionales (incluyendo un curso actualizado en `/learn` que enseña el Enrutador de Aplicaciones) y ejemplos de bases de código del mundo real (incluyendo una reescritura de [Next.js Commerce](https://github.com/vercel/commerce)). + +Lanzaremos nuevo contenido en la [documentación](/docs), en [Twitter](https://twitter.com/nextjs), [YouTube](https://www.youtube.com/c/VercelHQ) y más. + +### [Nuevas características de React](#new-react-features) + +También hemos escuchado sus comentarios sobre la educación en torno a las nuevas características de React que están disponibles en el Enrutador de Aplicaciones de Next.js. + +* **Componentes del Servidor (Server Components)**: Es importante destacar que características como los Componentes del Servidor y convenciones como la directiva [`"use client"`](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) no son específicas de Next.js, sino parte del ecosistema más amplio de React. + + Nuestro equipo, nuestros socios en Meta y otros contribuyentes independientes están trabajando para proporcionar más educación sobre estos temas. Son conceptos tempranos, pero confiamos en el ecosistema de React y la [educación continua](https://github.com/reactwg/server-components/discussions/5). + +* **Componentes del Cliente (Client Components)**: Con la reciente conversación sobre los Componentes del Servidor, es importante señalar que los componentes del cliente _no_ son una desoptimización. El cliente es una parte válida del modelo de React y no desaparecerá. + + Puede pensar en los componentes del cliente como el ecosistema existente de Next.js hoy, donde sus bibliotecas y herramientas favoritas siguen funcionando. Por ejemplo, una pregunta común que hemos visto es si `"use client"` necesita agregarse a cada archivo para convertirlo en un componente del cliente. Esto no es necesario, pero entendemos que estos conceptos son nuevos y tomará tiempo aprenderlos. Solo necesita [marcar el límite de nivel superior](/docs/getting-started/react-essentials#the-use-client-directive) donde su código pasa del servidor al cliente. Esta arquitectura le permite [entrelazar componentes del servidor y del cliente](https://github.com/reactwg/server-components/discussions/5). + +* **Crecimiento del ecosistema de terceros**: Además de la educación, el ecosistema en torno a las nuevas características de React todavía está creciendo. Por ejemplo, [Panda CSS](https://panda-css.com/), una biblioteca CSS-in-JS de los creadores de Chakra UI, acaba de anunciar soporte para React Server Components. + +* **Acciones del Servidor (Alpha)**: Las [Acciones del Servidor](/docs/app/building-your-application/data-fetching/server-actions) permiten mutaciones de datos del lado del servidor, reducción de JavaScript del lado del cliente y formularios con mejora progresiva. Aún no recomendamos usar Acciones del Servidor en producción. Agradecemos los comentarios tempranos de los probadores alfa que nos ayudan a dar forma al futuro de esta característica. + + +[Gracias](#thank-you) +----------------------- + +Estamos agradecidos de que muchos de ustedes hayan elegido aprender y construir con Next.js. + +Nuestro enfoque en el rendimiento, la estabilidad y la experiencia del desarrollador se reflejará en los próximos lanzamientos de Next.js. Queremos que usar Next.js sea encantador, y que los haga (a usted y a su equipo) más productivos. + +Como siempre, apreciamos enormemente sus comentarios. Si está experimentando algún problema con Next.js, por favor [abra un issue](https://github.com/vercel/next.js/issues/new/choose), o [inicie una nueva discusión](https://github.com/vercel/next.js/discussions), y lo investigaremos. \ No newline at end of file diff --git a/apps/docs/content/es/blog/layouts-rfc.mdx b/apps/docs/content/es/blog/layouts-rfc.mdx new file mode 100644 index 00000000..7afbabec --- /dev/null +++ b/apps/docs/content/es/blog/layouts-rfc.mdx @@ -0,0 +1,911 @@ +--- +source-updated-at: 2025-05-29T19:07:21.000Z +translation-updated-at: 2025-06-02T19:25:53.685Z +title: RFC de Layouts +description: >- + Rutas anidadas y layouts, enrutamiento en cliente y servidor, características de React 18, y + diseñado para Componentes del Servidor. +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 +--- + +Este RFC (Request for Comment) describe la actualización más grande de Next.js desde su introducción en 2016: + +* **Layouts anidados:** Construye aplicaciones complejas con rutas anidadas. +* **Diseñado para Componentes del Servidor:** Optimizado para navegación en subárboles. +* **Mejor obtención de datos:** Obtén datos en layouts evitando cascadas. +* **Uso de características de React 18:** Streaming, Transiciones y Suspense. +* **Enrutamiento en cliente y servidor:** Enrutamiento centrado en servidor con comportamiento _similar a SPA_. +* **100% adoptable incrementalmente:** Sin cambios disruptivos para una adopción gradual. +* **Patrones avanzados de enrutamiento:** Rutas paralelas, rutas interceptoras y más. + +El nuevo enrutador de Next.js se construirá sobre las [características recientemente lanzadas de React 18](https://reactjs.org/blog/2022/03/29/react-v18.html). Planeamos introducir valores predeterminados y convenciones que permitan adoptar fácilmente estas nuevas características y aprovechar sus beneficios. + +> El trabajo en este RFC está en curso y anunciaremos cuando las nuevas características estén disponibles. Para proporcionar feedback, únete a la conversación en [Github Discussions](https://github.com/vercel/next.js/discussions/37136). + +[Tabla de Contenidos](#tabla-de-contenidos) +------------------------------------------- + +* [Motivación](#motivación) +* [Terminología](#terminología) +* [Cómo funciona el enrutamiento actualmente](#cómo-funciona-el-enrutamiento-actualmente) +* [El directorio `app`](#introduciendo-el-enrutador-app) +* [Definiendo rutas](#definiendo-rutas) +* [Layouts](#layouts) +* [Páginas](#páginas) +* [Componentes del Servidor de React](#componentes-del-servidor-de-react) +* [Obtención de datos](#obtención-de-datos) +* [Grupos de rutas (Nuevo)](#grupos-de-rutas) +* [Enrutamiento centrado en servidor (Nuevo)](#enrutamiento-centrado-en-servidor) +* [Estados de carga instantáneos (Nuevo)](#estados-de-carga-instantáneos) +* [Manejo de errores (Nuevo)](#manejo-de-errores) +* [Plantillas (Nuevo)](#plantillas) +* [Patrones avanzados de enrutamiento (Nuevo)](#patrones-avanzados-de-enrutamiento) +* [Conclusión](#conclusión) + +[Motivación](#motivación) +------------------------- + +Hemos recopilado feedback de la comunidad en GitHub, Discord, Reddit y nuestra encuesta de desarrolladores sobre las limitaciones actuales del enrutamiento en Next.js. Encontramos que: + +* La experiencia del desarrollador al crear layouts puede mejorarse. Debería ser fácil crear layouts que puedan anidarse, compartirse entre rutas y preservar su estado en la navegación. +* Muchas aplicaciones de Next.js son paneles o consolas que se beneficiarían de soluciones de enrutamiento más avanzadas. + +Aunque el sistema de enrutamiento actual ha funcionado bien desde los inicios de Next.js, queremos facilitar la construcción de aplicaciones web más performantes y ricas en características. + +Como mantenedores del framework, también queremos construir un sistema de enrutamiento compatible con versiones anteriores y alineado con el futuro de React. + +> **Nota:** Algunas convenciones de enrutamiento se inspiraron en el enrutador basado en Relay de Meta, donde se desarrollaron originalmente algunas características de los Componentes del Servidor, así como en enrutadores del lado del cliente como React Router y Ember.js. La convención del archivo `layout.js` se inspiró en el trabajo realizado en SvelteKit. También agradecemos a [Cassidy](https://twitter.com/cassidoo) por abrir [un RFC anterior sobre layouts](https://github.com/vercel/next.js/discussions/26389). + +[Terminología](#terminología) +----------------------------- + +Este RFC introduce nuevas convenciones y sintaxis de enrutamiento. La terminología se basa en React y términos estándar de la plataforma web. A lo largo del RFC, verás estos términos vinculados a sus definiciones. + +* **Árbol:** Convención para visualizar una estructura jerárquica. Por ejemplo, un árbol de componentes con componentes padre e hijos, una estructura de carpetas, etc. +* **Subárbol:** Parte del árbol, comenzando en la raíz (primero) y terminando en las hojas (último). + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/terminology.png) + +* **Ruta URL:** Parte de la URL que viene después del dominio. +* **Segmento URL:** Parte de la ruta URL delimitada por barras. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/url-anatomy.png) + +[Cómo funciona el enrutamiento actualmente](#cómo-funciona-el-enrutamiento-actualmente) +-------------------------------------------------------------------------------------- + +Actualmente, Next.js usa el sistema de archivos para mapear carpetas y archivos individuales en el directorio [Pages](/docs/pages/building-your-application/routing/pages-and-layouts) a rutas accesibles mediante URLs. Cada archivo **página** exporta un Componente React y tiene una **ruta** asociada basada en su nombre de archivo. Por ejemplo: + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routing-today.png) + +* **Rutas dinámicas:** Next.js soporta [Rutas dinámicas](/docs/pages/building-your-application/routing/dynamic-routes) (incluyendo variaciones catch all) con las convenciones `[param].js`, `[...param].js` y `[[...param]].js`. +* **Layouts:** Next.js ofrece soporte para layouts simples [basados en componentes](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern), layouts por página usando un [patrón de propiedad](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts), y un layout global único usando una [app personalizada](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#single-shared-layout-with-custom-app). +* **Obtención de datos:** Next.js proporciona métodos de obtención de datos ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)) que pueden usarse a nivel de página (ruta). Estos métodos determinan si una página debe generarse estáticamente ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)) o renderizarse en el servidor ([`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)). Además, puedes usar [Regeneración Estática Incremental (ISR)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) para crear o actualizar páginas estáticas después de construir un sitio. +* **Renderizado:** Next.js ofrece tres opciones de renderizado: [Generación Estática](https://nextjs.org/learn/foundations/how-nextjs-works/rendering), [Renderizado en el Servidor](https://nextjs.org/learn/foundations/how-nextjs-works/rendering), y [Renderizado en el Cliente](https://nextjs.org/learn/foundations/how-nextjs-works/rendering). Por defecto, las páginas se generan estáticamente a menos que tengan un requerimiento de datos bloqueante (`getServerSideProps`). + +[Introduciendo el directorio `app`](#introduciendo-el-directorio-app) +--------------------------------------------------------------------- + +Para asegurar que estas mejoras puedan adoptarse incrementalmente y evitar cambios disruptivos, proponemos un nuevo directorio llamado `app`. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/app-folder.png) + +El directorio `app` funcionará junto al directorio `pages`. Puedes mover partes de tu aplicación gradualmente al nuevo directorio `app` para aprovechar las nuevas características. Para compatibilidad con versiones anteriores, el comportamiento del directorio `pages` permanecerá igual y seguirá siendo soportado. + +[Definiendo rutas](#definiendo-rutas) +------------------------------------- + +Puedes usar la jerarquía de **carpetas** dentro de `app` para definir rutas. Una **ruta** es una única ruta de carpetas anidadas, siguiendo la jerarquía desde la **carpeta raíz** hasta una **carpeta hoja** final. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routes.png) + +Por ejemplo, puedes añadir una nueva ruta `/dashboard/settings` anidando dos carpetas nuevas en el directorio `app`. + +> **Nota:** +> +> * Con este sistema, usarás carpetas para definir rutas y archivos para definir UI (con nuevas convenciones como `layout.js`, `page.js`, y en la segunda parte del RFC `loading.js`). +> * Esto permite colocar tus propios archivos de proyecto (componentes UI, archivos de prueba, stories, etc.) dentro del directorio `app`. Actualmente esto solo es posible con la [config pageExtensions](/docs/pages/api-reference/next-config-js/pageExtensions#including-non-page-files-in-the-pages-directory). + +### [Segmentos de ruta](#segmentos-de-ruta) + +Cada carpeta en el [subárbol](#terminología) representa un **segmento de ruta**. Cada segmento de ruta se mapea a un **segmento** correspondiente en una **[ruta URL](#terminología)**. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-segments.png) + +Por ejemplo, la ruta `/dashboard/settings` se compone de 3 segmentos: + +* El segmento raíz `/` +* El segmento `dashboard` +* El segmento `settings` + +> **Nota**: El nombre **segmento de ruta** se eligió para coincidir con la terminología existente sobre [rutas URL](#terminología). + +[Layouts](#layouts) +------------------- + +**Nueva convención de archivo:** `layout.js` + +Hasta ahora, hemos usado carpetas para definir las rutas de nuestra aplicación. Pero las carpetas vacías no hacen nada por sí mismas. Hablemos sobre cómo puedes definir la UI que se renderizará para estas rutas usando nuevas convenciones de archivos. + +Un **layout** es UI compartida entre segmentos de ruta en un [subárbol](#terminología). Los layouts no afectan las [rutas URL](#terminología) y no se vuelven a renderizar (el estado de React se preserva) cuando un usuario navega entre segmentos hermanos. + +Un layout puede definirse exportando por defecto un componente React desde un archivo `layout.js`. El componente debe aceptar una prop `children` que se llenará con los segmentos que el layout está envolviendo. + +Hay 2 tipos de layouts: + +* **Layout raíz:** Aplica a todas las rutas +* **Layout regular:** Aplica a rutas específicas + +Puedes anidar dos o más layouts para formar **layouts anidados**. + +### [Layout raíz](#layout-raíz) + +Puedes crear un layout raíz que aplicará a todas las rutas de tu aplicación añadiendo un archivo `layout.js` dentro de la carpeta `app`. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/root-layout.png) + +> **Nota:** +> +> * El layout raíz reemplaza la necesidad de una [App personalizada (`_app.js`)](/docs/pages/building-your-application/routing/custom-app) y un [Documento personalizado (`_document.js`)](/docs/pages/building-your-application/routing/custom-document) ya que aplica a todas las rutas. +> * Podrás usar el layout raíz para personalizar el shell inicial del documento (ej. etiquetas `` y ``). +> * Podrás obtener datos dentro del layout raíz (y otros layouts). + +### [Layouts regulares](#layouts-regulares) + +También puedes crear un layout que solo aplique a parte de tu aplicación añadiendo un archivo `layout.js` dentro de una carpeta específica. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/regular-layouts.png) + +Por ejemplo, puedes crear un archivo `layout.js` dentro de la carpeta `dashboard` que solo aplicará a los segmentos de ruta dentro de `dashboard`. + +### [Anidando layouts](#anidando-layouts) + +Los layouts se **anidan** por defecto. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts.png) + +Por ejemplo, si combinamos los dos layouts anteriores. El layout raíz (`app/layout.js`) se aplicaría al layout `dashboard`, que también aplicaría a todos los segmentos de ruta dentro de `dashboard/*`. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts-example.png) + +[Páginas](#páginas) +------------------- + +**Nueva convención de archivo:** `page.js` + +Una página es UI única para un segmento de ruta. Puedes crear una página añadiendo un archivo `page.js` dentro de una carpeta. + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page.png) + +Por ejemplo, para crear páginas para las rutas `/dashboard/*`, puedes añadir un archivo `page.js` dentro de cada carpeta. Cuando un usuario visite `/dashboard/settings`, Next.js renderizará el archivo `page.js` para la carpeta `settings` envuelto en cualquier layout que exista más arriba en el [subárbol](#terminología). + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-example.png) + +Puedes crear un archivo `page.js` directamente dentro de la carpeta dashboard para coincidir con la ruta `/dashboard`. El layout dashboard también aplicará a esta página: + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-nested.png) + +Esta ruta se compone de 2 segmentos: + +* El segmento raíz `/` +* El segmento `dashboard` + +> **Nota:** +> +> * Para que una ruta sea válida, necesita tener una página en su segmento hoja. Si no lo tiene, la ruta lanzará un error. + +### [Comportamiento de Layout y Página](#comportamiento-de-layout-y-página) + +* Las extensiones de archivo `js|jsx|ts|tsx` pueden usarse para Páginas y Layouts. +* Los Componentes de Página son la exportación por defecto de `page.js`. +* Los Componentes de Layout son la exportación por defecto de `layout.js`. +* Los Componentes de Layout **deben** aceptar una prop `children`. + +Cuando se renderiza un componente layout, la prop `children` se llenará con un layout hijo (si existe más abajo en el [subárbol](#terminología)) o una página. + +Puede ser más fácil visualizarlo como un [árbol](#terminología) de layouts donde el layout padre seleccionará el layout hijo más cercano hasta llegar a una página. + +**Ejemplo:** + +![](https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/basic-example.png) + +```js filename="app/layout.js" +// Layout raíz +// - Aplica a todas las rutas +export default function RootLayout({ children }) { + return ( + + +
+ {children} +