TechTalk__8_-_First_look_at_Next.js_13__1_.pdf

Next.js has quickly become one of the most in-demand skills in the web development space. In version 13, the experimental releases were big and took over the spotlight. This caused many people to consider the whole release unstable and experimental — but it’s not. Next.js 13 is actually quite stable and allows for a smooth upgrade from version 12 if you don’t intend to adopt any experimental API. Most changes can be incrementally adopted, which we’ll get into detail in this talk.

Transcript

1. First look at Next.JS 13
2. HypeTech Jobs Job opportunities at hype tech companies hypetechjobs.com | hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev
3. NEXT.js
4. Next.js is an all-in-one fullstack modern application building solution.
5. o1 Relatively easy to learn. o2 Built-in CSS support. o3 Automatic TypeScript support. o4 Multiple data fetching technique. o5 File-system routing.
6. Next.js has quickly become one of the most in demand skills in the web development space.
7. NEXT.js 13
8. It may be confusing to distinguish the hype, the misinformation, and what’s stable for your production apps
9. As with all Next.js releases, there are a few APIs that are moved into the stable core and for recommended use, and there are others still in the experimental channel.
10. “Experimental” APIs are still up for debate.
11. The main functionality is there, but the question of how these APIs behave and how they can be used is still susceptible to change as there may be bugs or unexpected side effects.
12. In version 13, the experimental releases were big and took over the spotlight. This caused many people to consider the whole release unstable and experimental
13. Next.js 13 is actually quite stable and allows for a smooth upgrade from version 12
14. Stable • “New” Image Component to replace legacy Image component as default; • ES Module Support for next.config.mjs • “New” Link component.
15. Experimental • App Directory • New Bundler (Turbopack) • Font Optimization
16. New Image And Link
17. Next Image has been living a double life since Next.js 12 in @next/image and @next/future/image
18. In Next.js 13, the default component is switched: • next/image moves to next/legacy/image • next/future/image moves to next/image
19. This change comes with a codemod to allow for a smooth migration when upgrading Next.js npx @next/codemod next-image-to-legacy-image ./pages
20. Re-test your pages in every major browser to see if everything looks correct.
21. ES Modules And Automatic Module Transpilation
22. Share configuration between configuration files and other files that may be used in runtime was not easy. That’s because next.config.js is written with CommonJS as the module system, which can’t import from ESM files
23. Now Next.js supports ESM simply by adding type: "module" to your package.json and renaming next.config.js → next.config.mjs The “m” in “mjs” stands for “module” and is part of the Node.js spec for ESM support.
24. For Monorepos using internal packages a special plugin was necessary to transpile those modules on build-time when consuming them. From Next.js 13, this can be arranged without a plugin by simply passing an (experimental) property to your next.config.mjs
25. const nextConfig = { experimental: { transpilePackages: ['@hype/design-system'], }, }; With these settings, it is possible to develop both the dependency component and your app simultaneously without any publishing or workaround.
26. The App Directory
27. A big architectural rewrite. It puts React Server Components front and center
28. New routing system and router hooks (under next/navigation instead of next/router), and flips the entire data-fetching story
29. Huge mental model change to how you architect your Next.js app
30. Source: Smashingmagazine.com
31. app directory is powered by Server Components. Each component is in charge of its own data, meaning you can now fetch-then-render every component you need and cache them individually This will perform Incremental Static Regeneration (ISR) at a much more granular level.
32. In Next.js 13 all components inside the app directory are React Server Components by default, including special files (tests, styles, other components, etc.) you are set up to achieve performance gains without doing any work or rewriting your components
33. You can use Client Components by specifying a "use client" directive at the top of the component meant for the client.
34. You should add "use client" directive when • using useState or useEffect client hooks • you depend on certain browser APIs • you want to add certain event listeners
35. In other cases, when you don't need things from the client, it is best to leave components as they are and let them be rendered as Server Components by Next.js
36. Summary
37. YOU DON’T NEED TO GO “ALL-IN”
38. The transition from the /pages architecture to /app can be done incrementally. Both solutions can coexist as long as routes don’t overlap. No mention in Next.js’ roadmap about deprecating support for /pages
39. Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf
40. As everything good in life, knowledge is great only when shared hypetech.io/education
41. contact@reactweek.dev