{"id":14942,"date":"2023-03-03T15:47:54","date_gmt":"2023-03-03T14:47:54","guid":{"rendered":"https:\/\/vived.io\/?p=14942"},"modified":"2023-03-03T16:04:41","modified_gmt":"2023-03-03T15:04:41","slug":"co-nowego-w-next-js-frontend-weekly-vol-127","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/","title":{"rendered":"Co nowego w Next.js | Frontend Weekly vol. 127"},"content":{"rendered":"\n

1. Szybki przegl\u0105d nowo\u015bci w Next.js<\/h2>\n\n\n\n

Pod koniec pa\u017adziernika zesz\u0142ego roku do Next.js przysz\u0142a prawdziwa rewolucja. Po wielu miesi\u0105cach iteracji nad RFC, wraz z Next.js 13 zaprezentowany zosta\u0142 zupe\u0142nie nowy router. Wprowadza\u0142 on mi\u0119dzy innymi Layouts i od\u015bwie\u017con\u0105 obs\u0142ug\u0119 b\u0142\u0119d\u00f3w i \u0142adowania. Najwi\u0119ksz\u0105 nowo\u015bci\u0105 by\u0142o jednak oparcie routera o React Server Components – technologii wci\u0105\u017c mocno eksperymentalnej. Od debiutu Next.js 13 minie nied\u0142ugo p\u00f3\u0142 roku – w tym czasie przygotowane zosta\u0142y dwie du\u017ce aktualizacje i najwy\u017cszy czas, \u017ceby\u015bmy przyjrzeli si\u0119 im dok\u0142\u0105dniej.<\/p>\n\n\n

\n
\"\"
\u0179r\u00f3d\u0142o: https:\/\/twitter.com\/housecor\/status\/1631296202409902086<\/a><\/figcaption><\/figure><\/div>\n\n\n
\n\n\n\n

Je\u015bli checie nadrobi\u0107 temat Next.js 13 i React Server Components, to polecam<\/strong>:<\/p>\n\n\n\n

The future is now \u2013 Next.js 13 | Frontend Weekly vol. 110
<\/a>Make use of `use` in React \u2013 a new hook is coming | Frontend Weekly vol. 109
<\/a>React 18 | Frontend Weekly vol. 81<\/a>
How React server components work: an in-depth guide<\/a>

<\/a><\/p>\n\n\n\n

\n\n\n\n

Metadata API<\/h3>\n\n\n\n

Po Server Side Rendering zazwyczaj si\u0119gamy, kiedy potzebujemy zaopiekowa\u0107 si\u0119 tematem SEO. A\u017c dziwi, \u017ce Next.js dopiero teraz postanowi\u0142 nale\u017cycie zaopiekowa\u0107 si\u0119 generowaniem metadanych, kt\u00f3re s\u0105 kluczowe dla tego tematu. Nowe Metadata API umo\u017cliwia eksportowania zmiennej metadata<\/code> na dowolnym poziomie routingu, a framework odpowiednio zajmie si\u0119 po\u0142\u0105czeniem ich w ca\u0142o\u015b\u0107 wszystkich znalezionych zmiennych w ca\u0142o\u015b\u0107.<\/p>\n\n\n\n

export const metadata = {\n  openGraph: {\n    title: 'Next.js',\n    description: 'The React Framework for the Web',\n    url: 'https:\/\/nextjs.org',\n    siteName: 'Next.js',\n    images: [\n      {\n        url: 'https:\/\/nextjs.org\/og.png',\n        width: 800,\n        height: 600,\n      },\n    ],\n    locale: 'en-US',\n    type: 'website',\n  },\n};<\/code><\/pre>\n\n\n\n
Statycznie typowane linki<\/h3>\n\n\n\n
Ciekawie wygl\u0105da te\u017c wsparcie dla typ\u00f3w w komponencie <Link \/><\/code>. W trakcie kompilacji na podstawie aktualnej struktury katalog\u00f3w Next.js wygeneruje typ odpowiadaj\u0105cy wszystkim mo\u017cliwym \u015bcie\u017ckom w naszej aplikacji. W efekcie o liter\u00f3wkach i innych drobnych b\u0142\u0119dach dowiemy si\u0119 ju\u017c na pierwszym etapie testowania aplikacji. R\u00f3wnie\u017c modyfikacja struktury katalog\u00f3w b\u0119dzie bezpieczniejsza ni\u017c kiedykolwiek wcze\u015bnie.<\/p>\n\n\n\n
import type { Route } from 'next';\nimport Link from 'next\/link'\n\n\/\/ \u2705\n<Link href="\/about" \/>\n\/\/ \u2705\n<Link href="\/blog\/nextjs" \/>\n\/\/ \u2705\n<Link href={`\/blog\/${slug}`} \/>\n\n\/\/ \u274c TypeScript errors if href is not a valid route\n<Link href="\/aboot" \/><\/code><\/pre>\n\n\n\n
Rest API<\/h3>\n\n\n\n
Jednym z najcz\u0119\u015bciej wymienianych brak\u00f3w nowego routera by\u0142a obs\u0142uga zapyta\u0144 REST. Next.js 13.2 przyni\u00f3s\u0142 rozwi\u0105zanie i tego problemu. Kod obs\u0142uguj\u0105cy zapytania REST umieszczamy w pliku route.js<\/code> i eksportujemy z niego metody nazwane odpowiednio GET<\/code>, HEAD<\/code>, OPTIONS<\/code>, POST<\/code>, PUT<\/code>, DELETE<\/code>, lub PATCH<\/code>.<\/p>\n\n\n\n
import { cookies } from 'next\/headers';\n\nexport async function GET(request: Request) {\n  const cookieStore = cookies();\n  const token = cookieStore.get('token');\n\n  return new Response('Hello, Next.js!', {\n    status: 200,\n    headers: { 'Set-Cookie': `token=${token}` },\n  });\n}<\/code><\/pre>\n\n\n\n
Walka z bundle size trwa<\/h3>\n\n\n\n
Aplikacje w ca\u0142o\u015bci oparte o React Server Components obiecywa\u0142y prawie zerowy bundle-size wysy\u0142any do klienta. W teorii wi\u0119c, ilo\u015b\u0107 kodu wysy\u0142anego do klienta w Next.js 13 powinien bi\u0107 na g\u0142ow\u0119 zar\u00f3wno Next.js 12 jak i ca\u0142\u0105 konkurencj\u0119. W praktyce okaza\u0142o si\u0119, \u017ce budnle size wzr\u00f3s\u0142…Na szcz\u0119\u015bcie Next.js 13.1 przyni\u00f3s\u0142 pierwsz\u0105 du\u017c\u0105 paczk\u0119 opytmalizacji. Co wa\u017cne, autorzy podkre\u015blaj\u0105, \u017ce nie powiedzieli w tej kwestii jeszcze ostatniego s\u0142owa. <\/p>\n\n\n\n
\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n
Next.js 13<\/a>
Next.js 13.1<\/a>
Next.js 13.2<\/a><\/p>\n\n\n\n
2. Chrome optymalizuje baterie dla MacOS<\/h2>\n\n\n\n
Safari znane jest z bycia Internentem Explorer naszych czas\u00f3w. Firefox znany jest z tego, \u017ce tak naprawd\u0119 nikt z niego nie korzysta. Chrome znany jest z po\u017cerania RAM’u i baterii. Niestety wygl\u0105da na to, \u017ce \u017caden z tych stereotyp\u00f3w nie jest prawdziwy.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
W poprzedniej edycji naszego raportu informowali\u015bmy Was o du\u017cych zmianach zmierzaj\u0105cych do Safari. W tym tygodniu przyszed\u0142 czas na nowo\u015bci w przegl\u0105darce od Google. Do najnowszego Chrome trafi\u0142a w\u0142a\u015bnie paczka optymalizacji, kt\u00f3ra skupia si\u0119 na zmniejszeniu zu\u017cycia energii, a co za tym idzie wyd\u0142u\u017ceniu czasu pracy na baterii. Benchmarki przeprowadzone przez Google pokazuj\u0105, \u017ce MacBook Pro z M2 na pok\u0142adzie wytrzyma 17 godzin korzystania z Chrome. Je\u015bli jeste\u015bcie ciekawi na czym dok\u0142adnie polegaj\u0105 wprowadzone optymalizacje, to informacje znajdziecie w poni\u017cszym artykule.<\/p>\n\n\n\n
Do more with Chrome on a single charge on MacBooks<\/a><\/p>\n\n\n\n
3. O tym jak Sentry przeszed\u0142 z Encyme na React Testing Library<\/h2>\n\n\n\n
Na zako\u0144czenie dzisiejszej wyj\u0105tkowo kr\u00f3tkiej edycji weekly, mamy dla Was ma\u0142\u0105 polecajk\u0119. Sentry na przestrzeni ostatnich kilku miesi\u0119cy zmigrowa\u0142 si\u0119 z Enzyme do React Testing Library. Je\u015bli jeste\u015bcie ciekawi jakie przeszkody napotkali na swojej drodze i jak przebiega\u0142 ca\u0142y proces, to odpowiedzi znajdziecie w poni\u017cszym artykule.<\/p>\n\n\n\n
Sentry\u2019s Frontend Tests: Migrating from Enzyme to React Testing Library<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Miniony tydzie\u0144 by\u0142 dosy\u0107 spokojny, dlatego dzi\u015b przyjrzymy si\u0119 nowo\u015bciom w Next.js z kilku ostatnich miesi\u0119cy. Poza tym obalimy te\u017c kilka stereotyp\u00f3w dotycz\u0105cych Chrome.<\/p>\n","protected":false},"author":12,"featured_media":14963,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273,1],"tags":[],"class_list":["post-14942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","category-no-category"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png","feature_image_blog":{"ID":14954,"id":14954,"title":"tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d","filename":"tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","filesize":1646139,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","link":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/tborowicz_vl_a_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d\/","alt":"","author":"12","description":"","caption":"","name":"tborowicz_vl_a_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d","status":"inherit","uploaded_to":14942,"date":"2023-03-03 14:47:16","modified":"2023-03-03 14:47:16","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1536,"height":1024,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d-300x200.png","medium-width":300,"medium-height":200,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d-768x512.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d-1024x683.png","large-width":1024,"large-height":683,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","1536x1536-width":1536,"1536x1536-height":1024,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","2048x2048-width":1536,"2048x2048-height":1024,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/tborowicz_vl_A_server_rack_in_the_clouds_comic_style_12ac9c09-6728-46d0-a28e-d957e43d503d.png","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}},"estimated_reading_time":"3"},"yoast_head":"\nCo nowego w Next.js | Frontend Weekly vol. 127 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Co nowego w Next.js | Frontend Weekly vol. 127 - Vived\" \/>\n<meta property=\"og:description\" content=\"Miniony tydzie\u0144 by\u0142 dosy\u0107 spokojny, dlatego dzi\u015b przyjrzymy si\u0119 nowo\u015bciom w Next.js z kilku ostatnich miesi\u0119cy. Poza tym obalimy te\u017c kilka stereotyp\u00f3w dotycz\u0105cych Chrome.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-03T14:47:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-03T15:04:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/3.68.244.71\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Co nowego w Next.js | Frontend Weekly vol. 127\",\"datePublished\":\"2023-03-03T14:47:54+00:00\",\"dateModified\":\"2023-03-03T15:04:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\"},\"wordCount\":680,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png\",\"articleSection\":[\"Frontend\",\"No category\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\",\"url\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\",\"name\":\"Co nowego w Next.js | Frontend Weekly vol. 127 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png\",\"datePublished\":\"2023-03-03T14:47:54+00:00\",\"dateModified\":\"2023-03-03T15:04:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Co nowego w Next.js | Frontend Weekly vol. 127\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Co nowego w Next.js | Frontend Weekly vol. 127 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/","og_locale":"pl_PL","og_type":"article","og_title":"Co nowego w Next.js | Frontend Weekly vol. 127 - Vived","og_description":"Miniony tydzie\u0144 by\u0142 dosy\u0107 spokojny, dlatego dzi\u015b przyjrzymy si\u0119 nowo\u015bciom w Next.js z kilku ostatnich miesi\u0119cy. Poza tym obalimy te\u017c kilka stereotyp\u00f3w dotycz\u0105cych Chrome.","og_url":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/","og_site_name":"Vived","article_published_time":"2023-03-03T14:47:54+00:00","article_modified_time":"2023-03-03T15:04:41+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/3.68.244.71\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Co nowego w Next.js | Frontend Weekly vol. 127","datePublished":"2023-03-03T14:47:54+00:00","dateModified":"2023-03-03T15:04:41+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/"},"wordCount":680,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png","articleSection":["Frontend","No category"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/","url":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/","name":"Co nowego w Next.js | Frontend Weekly vol. 127 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png","datePublished":"2023-03-03T14:47:54+00:00","dateModified":"2023-03-03T15:04:41+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/Frontend-Weekly-1200x628_V2.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/co-nowego-w-next-js-frontend-weekly-vol-127\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Co nowego w Next.js | Frontend Weekly vol. 127"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Szybki przegl\u0105d nowo\u015bci w Next.js<\/h2>\n","innerContent":["\n<h2>1. Szybki przegl\u0105d nowo\u015bci w Next.js<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pod koniec pa\u017adziernika zesz\u0142ego roku do Next.js przysz\u0142a prawdziwa rewolucja. Po wielu miesi\u0105cach iteracji nad RFC, wraz z Next.js 13 zaprezentowany zosta\u0142 zupe\u0142nie nowy router. Wprowadza\u0142 on mi\u0119dzy innymi Layouts i od\u015bwie\u017con\u0105 obs\u0142ug\u0119 b\u0142\u0119d\u00f3w i \u0142adowania. Najwi\u0119ksz\u0105 nowo\u015bci\u0105 by\u0142o jednak oparcie routera o React Server Components - technologii wci\u0105\u017c mocno eksperymentalnej. Od debiutu Next.js 13 minie nied\u0142ugo p\u00f3\u0142 roku - w tym czasie przygotowane zosta\u0142y dwie du\u017ce aktualizacje i najwy\u017cszy czas, \u017ceby\u015bmy przyjrzeli si\u0119 im dok\u0142\u0105dniej.<\/p>\n","innerContent":["\n<p>Pod koniec pa\u017adziernika zesz\u0142ego roku do Next.js przysz\u0142a prawdziwa rewolucja. Po wielu miesi\u0105cach iteracji nad RFC, wraz z Next.js 13 zaprezentowany zosta\u0142 zupe\u0142nie nowy router. Wprowadza\u0142 on mi\u0119dzy innymi Layouts i od\u015bwie\u017con\u0105 obs\u0142ug\u0119 b\u0142\u0119d\u00f3w i \u0142adowania. Najwi\u0119ksz\u0105 nowo\u015bci\u0105 by\u0142o jednak oparcie routera o React Server Components - technologii wci\u0105\u017c mocno eksperymentalnej. Od debiutu Next.js 13 minie nied\u0142ugo p\u00f3\u0142 roku - w tym czasie przygotowane zosta\u0142y dwie du\u017ce aktualizacje i najwy\u017cszy czas, \u017ceby\u015bmy przyjrzeli si\u0119 im dok\u0142\u0105dniej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14952,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/FqOGiLmWYAQrCRE.png\" alt=\"\" class=\"wp-image-14952\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/twitter.com\/housecor\/status\/1631296202409902086\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/twitter.com\/housecor\/status\/1631296202409902086<\/a><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/FqOGiLmWYAQrCRE.png\" alt=\"\" class=\"wp-image-14952\"\/><figcaption class=\"wp-element-caption\">\u0179r\u00f3d\u0142o: <a href=\"https:\/\/twitter.com\/housecor\/status\/1631296202409902086\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/twitter.com\/housecor\/status\/1631296202409902086<\/a><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><strong>Je\u015bli checie nadrobi\u0107 temat Next.js 13 i React Server Components, to polecam<\/strong>:<\/p>\n","innerContent":["\n<p><strong>Je\u015bli checie nadrobi\u0107 temat Next.js 13 i React Server Components, to polecam<\/strong>:<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/vived.io\/the-future-is-now-next-js-13-frontend-weekly-vol-110\/\" target=\"_blank\" rel=\"noreferrer noopener\">The future is now \u2013 Next.js 13 | Frontend Weekly vol. 110<br><\/a><a href=\"https:\/\/vived.io\/new-hook-is-coming-to-react-frontend-weekly-vol-109\/\" target=\"_blank\" rel=\"noreferrer noopener\">Make use of `use` in React \u2013 a new hook is coming | Frontend Weekly vol. 109<br><\/a><a href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\" target=\"_blank\" rel=\"noreferrer noopener\">React 18 | Frontend Weekly vol. 81<\/a><br><a href=\"https:\/\/www.plasmic.app\/blog\/how-react-server-components-work\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">How React server components work: an in-depth guide<\/a><br><a href=\"https:\/\/www.plasmic.app\/blog\/how-react-server-components-work\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><br><\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/vived.io\/the-future-is-now-next-js-13-frontend-weekly-vol-110\/\" target=\"_blank\" rel=\"noreferrer noopener\">The future is now \u2013 Next.js 13 | Frontend Weekly vol. 110<br><\/a><a href=\"https:\/\/vived.io\/new-hook-is-coming-to-react-frontend-weekly-vol-109\/\" target=\"_blank\" rel=\"noreferrer noopener\">Make use of `use` in React \u2013 a new hook is coming | Frontend Weekly vol. 109<br><\/a><a href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\" target=\"_blank\" rel=\"noreferrer noopener\">React 18 | Frontend Weekly vol. 81<\/a><br><a href=\"https:\/\/www.plasmic.app\/blog\/how-react-server-components-work\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">How React server components work: an in-depth guide<\/a><br><a href=\"https:\/\/www.plasmic.app\/blog\/how-react-server-components-work\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><br><\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Metadata API<\/h3>\n","innerContent":["\n<h3>Metadata API<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Po Server Side Rendering zazwyczaj si\u0119gamy, kiedy potzebujemy zaopiekowa\u0107 si\u0119 tematem SEO. A\u017c dziwi, \u017ce Next.js dopiero teraz postanowi\u0142 nale\u017cycie zaopiekowa\u0107 si\u0119 generowaniem metadanych, kt\u00f3re s\u0105 kluczowe dla tego tematu. Nowe Metadata API umo\u017cliwia eksportowania zmiennej <code>metadata<\/code> na dowolnym poziomie routingu, a framework odpowiednio zajmie si\u0119 po\u0142\u0105czeniem ich w ca\u0142o\u015b\u0107 wszystkich znalezionych zmiennych w ca\u0142o\u015b\u0107.<\/p>\n","innerContent":["\n<p>Po Server Side Rendering zazwyczaj si\u0119gamy, kiedy potzebujemy zaopiekowa\u0107 si\u0119 tematem SEO. A\u017c dziwi, \u017ce Next.js dopiero teraz postanowi\u0142 nale\u017cycie zaopiekowa\u0107 si\u0119 generowaniem metadanych, kt\u00f3re s\u0105 kluczowe dla tego tematu. Nowe Metadata API umo\u017cliwia eksportowania zmiennej <code>metadata<\/code> na dowolnym poziomie routingu, a framework odpowiednio zajmie si\u0119 po\u0142\u0105czeniem ich w ca\u0142o\u015b\u0107 wszystkich znalezionych zmiennych w ca\u0142o\u015b\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">export const metadata = {\n  openGraph: {\n    title: 'Next.js',\n    description: 'The React Framework for the Web',\n    url: 'https:\/\/nextjs.org',\n    siteName: 'Next.js',\n    images: [\n      {\n        url: 'https:\/\/nextjs.org\/og.png',\n        width: 800,\n        height: 600,\n      },\n    ],\n    locale: 'en-US',\n    type: 'website',\n  },\n};<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">export const metadata = {\n  openGraph: {\n    title: 'Next.js',\n    description: 'The React Framework for the Web',\n    url: 'https:\/\/nextjs.org',\n    siteName: 'Next.js',\n    images: [\n      {\n        url: 'https:\/\/nextjs.org\/og.png',\n        width: 800,\n        height: 600,\n      },\n    ],\n    locale: 'en-US',\n    type: 'website',\n  },\n};<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Statycznie typowane linki<\/h3>\n","innerContent":["\n<h3>Statycznie typowane linki<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ciekawie wygl\u0105da te\u017c wsparcie dla typ\u00f3w w komponencie <code><Link \/><\/code>. W trakcie kompilacji na podstawie aktualnej struktury katalog\u00f3w Next.js wygeneruje typ odpowiadaj\u0105cy wszystkim mo\u017cliwym \u015bcie\u017ckom w naszej aplikacji. W efekcie o liter\u00f3wkach i innych drobnych b\u0142\u0119dach dowiemy si\u0119 ju\u017c na pierwszym etapie testowania aplikacji. R\u00f3wnie\u017c modyfikacja struktury katalog\u00f3w b\u0119dzie bezpieczniejsza ni\u017c kiedykolwiek wcze\u015bnie.<\/p>\n","innerContent":["\n<p>Ciekawie wygl\u0105da te\u017c wsparcie dla typ\u00f3w w komponencie <code><Link \/><\/code>. W trakcie kompilacji na podstawie aktualnej struktury katalog\u00f3w Next.js wygeneruje typ odpowiadaj\u0105cy wszystkim mo\u017cliwym \u015bcie\u017ckom w naszej aplikacji. W efekcie o liter\u00f3wkach i innych drobnych b\u0142\u0119dach dowiemy si\u0119 ju\u017c na pierwszym etapie testowania aplikacji. R\u00f3wnie\u017c modyfikacja struktury katalog\u00f3w b\u0119dzie bezpieczniejsza ni\u017c kiedykolwiek wcze\u015bnie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import type { Route } from 'next';\nimport Link from 'next\/link'\n\n\/\/ \u2705\n<Link href=\"\/about\" \/>\n\/\/ \u2705\n<Link href=\"\/blog\/nextjs\" \/>\n\/\/ \u2705\n<Link href={`\/blog\/${slug}`} \/>\n\n\/\/ \u274c TypeScript errors if href is not a valid route\n<Link href=\"\/aboot\" \/><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import type { Route } from 'next';\nimport Link from 'next\/link'\n\n\/\/ \u2705\n<Link href=\"\/about\" \/>\n\/\/ \u2705\n<Link href=\"\/blog\/nextjs\" \/>\n\/\/ \u2705\n<Link href={`\/blog\/${slug}`} \/>\n\n\/\/ \u274c TypeScript errors if href is not a valid route\n<Link href=\"\/aboot\" \/><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Rest API<\/h3>\n","innerContent":["\n<h3>Rest API<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jednym z najcz\u0119\u015bciej wymienianych brak\u00f3w nowego routera by\u0142a obs\u0142uga zapyta\u0144 REST. Next.js 13.2 przyni\u00f3s\u0142 rozwi\u0105zanie i tego problemu. Kod obs\u0142uguj\u0105cy zapytania REST umieszczamy w pliku <code>route.js<\/code> i eksportujemy z niego metody nazwane odpowiednio <code>GET<\/code>, <code>HEAD<\/code>, <code>OPTIONS<\/code>, <code>POST<\/code>, <code>PUT<\/code>, <code>DELETE<\/code>, lub <code>PATCH<\/code>.<\/p>\n","innerContent":["\n<p>Jednym z najcz\u0119\u015bciej wymienianych brak\u00f3w nowego routera by\u0142a obs\u0142uga zapyta\u0144 REST. Next.js 13.2 przyni\u00f3s\u0142 rozwi\u0105zanie i tego problemu. Kod obs\u0142uguj\u0105cy zapytania REST umieszczamy w pliku <code>route.js<\/code> i eksportujemy z niego metody nazwane odpowiednio <code>GET<\/code>, <code>HEAD<\/code>, <code>OPTIONS<\/code>, <code>POST<\/code>, <code>PUT<\/code>, <code>DELETE<\/code>, lub <code>PATCH<\/code>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { cookies } from 'next\/headers';\n\nexport async function GET(request: Request) {\n  const cookieStore = cookies();\n  const token = cookieStore.get('token');\n\n  return new Response('Hello, Next.js!', {\n    status: 200,\n    headers: { 'Set-Cookie': `token=${token}` },\n  });\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { cookies } from 'next\/headers';\n\nexport async function GET(request: Request) {\n  const cookieStore = cookies();\n  const token = cookieStore.get('token');\n\n  return new Response('Hello, Next.js!', {\n    status: 200,\n    headers: { 'Set-Cookie': `token=${token}` },\n  });\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Walka z bundle size trwa<\/h3>\n","innerContent":["\n<h3>Walka z bundle size trwa<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Aplikacje w ca\u0142o\u015bci oparte o React Server Components obiecywa\u0142y prawie zerowy bundle-size wysy\u0142any do klienta. W teorii wi\u0119c, ilo\u015b\u0107 kodu wysy\u0142anego do klienta w Next.js 13 powinien bi\u0107 na g\u0142ow\u0119 zar\u00f3wno Next.js 12 jak i ca\u0142\u0105 konkurencj\u0119. W praktyce okaza\u0142o si\u0119, \u017ce budnle size wzr\u00f3s\u0142...Na szcz\u0119\u015bcie Next.js 13.1 przyni\u00f3s\u0142 pierwsz\u0105 du\u017c\u0105 paczk\u0119 opytmalizacji. Co wa\u017cne, autorzy podkre\u015blaj\u0105, \u017ce nie powiedzieli w tej kwestii jeszcze ostatniego s\u0142owa. <\/p>\n","innerContent":["\n<p>Aplikacje w ca\u0142o\u015bci oparte o React Server Components obiecywa\u0142y prawie zerowy bundle-size wysy\u0142any do klienta. W teorii wi\u0119c, ilo\u015b\u0107 kodu wysy\u0142anego do klienta w Next.js 13 powinien bi\u0107 na g\u0142ow\u0119 zar\u00f3wno Next.js 12 jak i ca\u0142\u0105 konkurencj\u0119. W praktyce okaza\u0142o si\u0119, \u017ce budnle size wzr\u00f3s\u0142...Na szcz\u0119\u015bcie Next.js 13.1 przyni\u00f3s\u0142 pierwsz\u0105 du\u017c\u0105 paczk\u0119 opytmalizacji. Co wa\u017cne, autorzy podkre\u015blaj\u0105, \u017ce nie powiedzieli w tej kwestii jeszcze ostatniego s\u0142owa. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/nextjs.org\/blog\/next-13\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js 13<\/a><br><a href=\"https:\/\/nextjs.org\/blog\/next-13-1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js 13.1<\/a><br><a href=\"https:\/\/nextjs.org\/blog\/next-13-2#built-in-seo-support-with-new-metadata-api\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js 13.2<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/nextjs.org\/blog\/next-13\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js 13<\/a><br><a href=\"https:\/\/nextjs.org\/blog\/next-13-1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js 13.1<\/a><br><a href=\"https:\/\/nextjs.org\/blog\/next-13-2#built-in-seo-support-with-new-metadata-api\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js 13.2<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Chrome optymalizuje baterie dla MacOS<\/h2>\n","innerContent":["\n<h2>2. Chrome optymalizuje baterie dla MacOS<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Safari znane jest z bycia Internentem Explorer naszych czas\u00f3w. Firefox znany jest z tego, \u017ce tak naprawd\u0119 nikt z niego nie korzysta. Chrome znany jest z po\u017cerania RAM'u i baterii. Niestety wygl\u0105da na to, \u017ce \u017caden z tych stereotyp\u00f3w nie jest prawdziwy.<\/p>\n","innerContent":["\n<p>Safari znane jest z bycia Internentem Explorer naszych czas\u00f3w. Firefox znany jest z tego, \u017ce tak naprawd\u0119 nikt z niego nie korzysta. Chrome znany jest z po\u017cerania RAM'u i baterii. Niestety wygl\u0105da na to, \u017ce \u017caden z tych stereotyp\u00f3w nie jest prawdziwy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":14948,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-11.jpeg\" alt=\"\" class=\"wp-image-14948\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/03\/download-11.jpeg\" alt=\"\" class=\"wp-image-14948\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W poprzedniej edycji naszego raportu informowali\u015bmy Was o du\u017cych zmianach zmierzaj\u0105cych do Safari. W tym tygodniu przyszed\u0142 czas na nowo\u015bci w przegl\u0105darce od Google. Do najnowszego Chrome trafi\u0142a w\u0142a\u015bnie paczka optymalizacji, kt\u00f3ra skupia si\u0119 na zmniejszeniu zu\u017cycia energii, a co za tym idzie wyd\u0142u\u017ceniu czasu pracy na baterii. Benchmarki przeprowadzone przez Google pokazuj\u0105, \u017ce MacBook Pro z M2 na pok\u0142adzie wytrzyma 17 godzin korzystania z Chrome. Je\u015bli jeste\u015bcie ciekawi na czym dok\u0142adnie polegaj\u0105 wprowadzone optymalizacje, to informacje znajdziecie w poni\u017cszym artykule.<\/p>\n","innerContent":["\n<p>W poprzedniej edycji naszego raportu informowali\u015bmy Was o du\u017cych zmianach zmierzaj\u0105cych do Safari. W tym tygodniu przyszed\u0142 czas na nowo\u015bci w przegl\u0105darce od Google. Do najnowszego Chrome trafi\u0142a w\u0142a\u015bnie paczka optymalizacji, kt\u00f3ra skupia si\u0119 na zmniejszeniu zu\u017cycia energii, a co za tym idzie wyd\u0142u\u017ceniu czasu pracy na baterii. Benchmarki przeprowadzone przez Google pokazuj\u0105, \u017ce MacBook Pro z M2 na pok\u0142adzie wytrzyma 17 godzin korzystania z Chrome. Je\u015bli jeste\u015bcie ciekawi na czym dok\u0142adnie polegaj\u0105 wprowadzone optymalizacje, to informacje znajdziecie w poni\u017cszym artykule.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/blog.chromium.org\/2023\/02\/do-more-with-chrome-on-single-charge-on.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Do more with Chrome on a single charge on MacBooks<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/blog.chromium.org\/2023\/02\/do-more-with-chrome-on-single-charge-on.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Do more with Chrome on a single charge on MacBooks<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. O tym jak Sentry przeszed\u0142 z Encyme na React Testing Library<\/h2>\n","innerContent":["\n<h2>3. O tym jak Sentry przeszed\u0142 z Encyme na React Testing Library<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na zako\u0144czenie dzisiejszej wyj\u0105tkowo kr\u00f3tkiej edycji weekly, mamy dla Was ma\u0142\u0105 polecajk\u0119. Sentry na przestrzeni ostatnich kilku miesi\u0119cy zmigrowa\u0142 si\u0119 z Enzyme do React Testing Library. Je\u015bli jeste\u015bcie ciekawi jakie przeszkody napotkali na swojej drodze i jak przebiega\u0142 ca\u0142y proces, to odpowiedzi znajdziecie w poni\u017cszym artykule.<\/p>\n","innerContent":["\n<p>Na zako\u0144czenie dzisiejszej wyj\u0105tkowo kr\u00f3tkiej edycji weekly, mamy dla Was ma\u0142\u0105 polecajk\u0119. Sentry na przestrzeni ostatnich kilku miesi\u0119cy zmigrowa\u0142 si\u0119 z Enzyme do React Testing Library. Je\u015bli jeste\u015bcie ciekawi jakie przeszkody napotkali na swojej drodze i jak przebiega\u0142 ca\u0142y proces, to odpowiedzi znajdziecie w poni\u017cszym artykule.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/blog.sentry.io\/2023\/02\/23\/sentrys-frontend-tests-migrating-from-enzyme-to-react-testing-library\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Sentry\u2019s Frontend Tests: Migrating from Enzyme to React Testing Library<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/blog.sentry.io\/2023\/02\/23\/sentrys-frontend-tests-migrating-from-enzyme-to-react-testing-library\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Sentry\u2019s Frontend Tests: Migrating from Enzyme to React Testing Library<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/14942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=14942"}],"version-history":[{"count":9,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/14942\/revisions"}],"predecessor-version":[{"id":14967,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/14942\/revisions\/14967"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/14963"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=14942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=14942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=14942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}