TechTalk__8_-_First_look_at_Next.js_13__1_.pdf

Slide 1

Slide 1 text

First look at Next.JS 13

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

NEXT.js

Slide 4

Slide 4 text

Next.js is an all-in-one fullstack modern application building solution.

Slide 5

Slide 5 text

o1 Relatively easy to learn. o2 Built-in CSS support. o3 Automatic TypeScript support. o4 Multiple data fetching technique. o5 File-system routing.

Slide 6

Slide 6 text

Next.js has quickly become one of the most in demand skills in the web development space.

Slide 7

Slide 7 text

NEXT.js 13

Slide 8

Slide 8 text

It may be confusing to distinguish the hype, the misinformation, and what’s stable for your production apps

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

“Experimental” APIs are still up for debate.

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Next.js 13 is actually quite stable and allows for a smooth upgrade from version 12

Slide 14

Slide 14 text

Stable ● “New” Image Component to replace legacy Image component as default; ● ES Module Support for next.config.mjs ● “New” Link component.

Slide 15

Slide 15 text

Experimental ● App Directory ● New Bundler (Turbopack) ● Font Optimization

Slide 16

Slide 16 text

New Image And Link

Slide 17

Slide 17 text

Next Image has been living a double life since Next.js 12 in @next/image and @next/future/image

Slide 18

Slide 18 text

In Next.js 13, the default component is switched: ● next/image moves to next/legacy/image ● next/future/image moves to next/image

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Re-test your pages in every major browser to see if everything looks correct.

Slide 21

Slide 21 text

ES Modules And Automatic Module Transpilation

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

The App Directory

Slide 27

Slide 27 text

A big architectural rewrite. It puts React Server Components front and center

Slide 28

Slide 28 text

New routing system and router hooks (under next/navigation instead of next/router), and ﬂips the entire data-fetching story

Slide 29

Slide 29 text

Huge mental model change to how you architect your Next.js app

Slide 30

Slide 30 text

Source: Smashingmagazine.com

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

In Next.js 13 all components inside the app directory are React Server Components by default, including special ﬁles (tests, styles, other components, etc.) you are set up to achieve performance gains without doing any work or rewriting your components

Slide 33

Slide 33 text

You can use Client Components by specifying a "use client" directive at the top of the component meant for the client.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Summary

Slide 37

Slide 37 text

YOU DON’T NEED TO GO “ALL-IN”

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf

Slide 40

Slide 40 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 41

Slide 41 text

[email protected]