Next.js 13

by jacobwg • 4 years ago

229 100 4 years ago

adoxyz• 4 years ago

Awesome release. As an early adopter of Next.js and seeing it evolve over the years, it's been one of the most consistent frameworks that continues to get better and "just works".

Is it perfect. No. But it's very close for most of my use cases.

samyok• 4 years ago

All these changes look great. I'm especially glad that next/link always renders an <a> now, if I read it right it seems to solve the "create a dummy span around some imported component" issue.

davidspiess2• 4 years ago

What i am still missing is the possibility to deploy next.js to a serverless platform where files have to be stored in S3 or Google Cloud Storage. Had anybody success to get it working, without loosing ISR functionality?

JSavageOne3• 4 years ago

Where are you struggling? Just `next build && next export` and your static site is compiled to the /out folder which you can subsequently push to S3 or Google Cloud Storage.

No idea what ISR stands for.

davidspiess2• 4 years ago

Incremental Static Regeneration. Next.js allows you to create or update static pages after you’ve built your site but stores them on the filesystem, which in a serverless environment does not exist.

dsissitka2• 4 years ago

Edit: There's some more discussion about Turbopack at https://news.ycombinator.com/item?id=33333695.

Looks like they launched a webpack alternative called Turbopack today:

Next.js 13 includes Turbopack, the new Rust-based successor to Webpack.

https://vercel.com/blog/turbopack

https://turbo.build/pack

nightski5• 4 years ago

Sigh another one? I thought Vite was the new thing.

AlmostAnyone3• 4 years ago

Sigh? I think the speed improvement is awesome.

pull_my_finger• 4 years ago

I think the issue starts when xyz new tool requires you to write code specific to that thing, which is something I avoid as much as possible. IMO they should strive to stay out of the way as much as possible and just bundle/optimize/tree-shake and not worry about extending JS as a language or nodejs as a runtime or doubling as a build tool or a filewatcher or a development server etc etc (see the UNIX philosophy 'do one thing well'), even at the expense of less optimal/fast builds. As soon as you start doing stuff like importing your images into your javascript so your bundler can do compiler tricks, you're painting yourself into the corner.

One recent offering I enjoyed working with was esbuild, as I could use it's CLI as part of my existing build system incrementally instead of planning my whole system around it.

dhruvarora013• 4 years ago

Spent the last few months migrating to Vite. The Javascript ecosystem is exhausting and exhilarating all at the same time

RunSet• 4 years ago

No telling how many sides the next iteration of the wheel may have but one thing's for certain: That one will be the ultimate version.

toinewx2• 4 years ago

Well at least Vite does not lock you in the Next.js eco-system, so it's something ¯\_(ツ)_/¯.

strangescript• 4 years ago

Overall the community is starting to embrace better languages for tooling, primarily Rust with some Go and Zig sprinkled in. Eventually I think we will hit a point where there will be a defacto dev tool that can take a web app and package it however you want, deploy it wherever you want, and do it very quickly. Some would argue those exist now, but until it can be done literally everywhere, painlessly, I would contend we aren't there yet. It's probably more likely something like WASM/WASI takes over before then honestly.

kyriakos• 4 years ago

What I hate about javascript fatigue is that there's never enough time for something to mature before it gets replaced. Documentation always covers the basic scenarios and never any edge cases. Sooner or later you end up trying to find a solution in a github issue 20 pages down.

pastor_bob• 4 years ago

On an application with 3,000 modules, Turbopack takes 1.8 seconds to boot up, while Vite takes 11.4 seconds.

How many apps are dealing with 3,000+ modules?

Joeri• 4 years ago

At the pace the javascript ecosystem is going, by next year it will be almost all of them. Create react app for a new default project pulls in 1400 packages, 300 MB in size, just to put a hello world page on a screen. That nobody thinks this is absolutely bonkers drives me absolutely bonkers.

yboris2• 4 years ago

Turbopack (comes with Next.js 13) seems AMAZING!

Turbopack updates 10x faster than Vite and 700x faster than Webpack
Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of Webpack and Next.js at Vercel.

solardev• 4 years ago

Super excited about Turbopack! Thank you for moving the Web forward so much.

gl-prod2• 4 years ago

Next[js] Conf is live right now at https://nextjs.org/conf

dsissitka2• 4 years ago

Might change later but if you don't want to give them an email address here's a direct link:

https://www.youtube.com/watch?v=NiknNI_0J48

gl-prod2• 4 years ago

q@q.q works.

+ on the website you can see all the incoming guests

latchkey6• 4 years ago

  // "alt" is now required for improved accessibility

I'm all for accessibility, but let us decide when to implement it.

calvin• 4 years ago

You should still be able to use alt="" to indicate that it is "decorative" and not meaningful imagery for a visually-impaired user.

latchkey6• 4 years ago

That's like the difference between null and undefined.

chrisco2553• 4 years ago

Instead use the ARIA tag role="presentation": https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... to indicate when an element has no semantic meaning and is purely visual.

kolanos• 4 years ago

I'm all for accessibility, but let us decide when to implement it.

Which usually means never.

googlryas3• 4 years ago

Which just means codebases will be littered with alt="" for no reason.

latchkey6• 4 years ago

Which is ok too. It is far better than encouraging people to write alt="" or alt="asdf".

See also (naming things): https://twitter.com/secretGeek/status/7269997868

lghh3• 4 years ago

I'd rather spend a literal 6-character burden (alt="") to put an empty string in my little hobby projects than live in a world where non-hobby projects can skip adding alt.

It should be very clear by just looking around on the internet that, when given the choice, accessibility will take a back seat.

latchkey6• 4 years ago

I'm curious why you think that forcing people to write alt="" is going to improve accessibility?

joshribakoff• 4 years ago

The HTML spec says it is required, even if you don’t think it should be required it is. https://html.spec.whatwg.org/multipage/images.html#alt

latchkey6• 4 years ago

NextJS could just create alt="" when rendering the HTML <img> element from their <Image> element.

guhidalg2• 4 years ago

Their tutorial is incredible, everyone should take a lesson from Vercel on this: https://nextjs.org/learn/foundations/from-react-to-nextjs/ge...

Tell me:

1. What I need to know to understand this documentation

2. The before state (plain React.js)

3. The after state (Next.js)

I'm fucking sold, I'm going to use Next.js just based on how well written this documentation is.

hardwaregeek• 4 years ago

I'm totally biased here but I've been super impressed with the documentation culture at Vercel. Definitely a high high priority internally.

JSavageOne3• 4 years ago

Their tutorial is fine, but personally I'd much rather just see a GitHub repo of a project that covers all the basics (eg. a CRUD app).

gherkinnn• 4 years ago

Why not both: https://github.com/vercel/next.js/tree/canary/examples

culi• 4 years ago

Their tutorial yields that and gives you a link to the final product on the first step

toinewx2• 4 years ago

I'm going to use Next.js just based on how well written this documentation is.

I Understand the euphoria, but this is a pretty bad take.

guhidalg2• 4 years ago

Is it? Give me an example of a poorly documented yet wildly popular and good software tool built in the last 10 years (No Stockholm Syndrome for old tools allowed!).

NayamAmarshe• 4 years ago

Surprisingly, my compile times with Next.js 12.3 have been really really awful. A simple CSS change takes almost 10 seconds to compile and I'd love to know why.

My app isn't complex, it uses Recoil, Tailwind and that's it. Compile times were better in v11 in my experience.

parhamn• 4 years ago

The next-gen bundler rewrites are getting insane, just as things were consolidating in the other parts of JS. We now have:

- EsBuild

- SWC (also written by someone who works at Vercel)

- TurboPack

- Vite (rollup)

- Parcel

- Rome

I've noticed in the javascript ecosystem there is much less convergence than in other languages. Everyone wants a flag in the ground.

halfmatthalfcat2• 4 years ago

That's a good thing? Keeps things fresh and keeps established "norms" unable to stay complacent.

nightski5• 4 years ago

Actually it tells me that the javascript ecosystem fails to build software that can adapt to change. The culture is to throw everything out and start fresh every time they want to do something different. It's terrible engineering.

fabian2k• 4 years ago

This will consolidate again, and these tools are not all equal. They cover different parts of the whole thing. There is clearly a desire for faster compilation and bundling, and various groups and people are trying out different approaches now.

Right now you can stay with Webpack or whatever you were using already, or you can try one of the new shiny things if you want to. But if you want to avoid the churn, it's probably time to just wait for a bit until things settle down.

JSavageOne3• 4 years ago

Beauty of nextjs though is that you don't have to worry about it unless you want to go under the hood. My quality of life has improved tremendously since I stopped having to deal with webpack config files, and upgrading to the hottest bundler on the street couldn't be lower on my list of priorities.

Vinnl8• 4 years ago

Yeah exactly, Next.js is the consolidation. If they can make things faster behind the scenes without my having to make changes, that's great.

PaulBGD_• 4 years ago

Vite is built on esbuild and Rollup, but there’s nothing tying it to either. In theory with the evolving ecosystem, it can swap whatever it wants to use internally and still provide a consistent experience.

chrisco2553• 4 years ago

It's a bigger ecosystem than all others, and there's no batteries included in web development, so it necessitates the need for tooling to be built from scratch.

jokethrowaway2• 4 years ago

everyone believes they can write some JS and call themselves developer

bigger audience, bigger chance to make it big selling crap to developers so more personalities try to build an audience by making OSS

slooonz• 4 years ago

I find the data fetching example extremely confusing…

1. Where does this "use" comes from ? It is not present in the official React API reference : https://reactjs.org/docs/react-api.html

2. It says that the value is not serialized, but what if Page is rendered client side and I want getData to always be executed server side (for example, it may contains secret API key, or make a database call) ?

3. getData is async, so what happens to name if the promise is not yet resolved ?

nthitz• 4 years ago

it's a new "hook", https://vived.io/new-hook-is-coming-to-react-frontend-weekly... https://github.com/reactjs/rfcs/pull/229 contain some discussion

Vinnl8• 4 years ago

But `use` is still just in the RFC phase, right? How can Next.js already be (committing to) using it?

rektide• 4 years ago

With Server Components and nested layouts in Next.js, you're able instantly render parts of the page that do not specifically require data, and show a loading state for parts of the page that are fetching data. With this approach, the user does not have to wait for the entire page to load before they can start interacting with it.

Crazy huge user win.

I am a little nervous how much stuff Next does in the middle, how thoroughly it links front & back end. Streaming a page with chunks missing then streaming sections as they resolve is pretty advanced magic. Amazing DX experience but I also can think back to asp.net & remember huge viewstate blobs & utterly magic middle-layers, and those were powerful too, but impregnible bizarre systems to the developer & that wasnt good.

Next keeps hitting reaply really nice sweet spots & consolidates & tackles so many problems, and my trepidation is small at this point, but this is really redefining the page a lot, & I feel like I really want some deep dives on the technics involved here, want to know the magic is somewhat accessible & coherent, for fellow would be meddlers.

andrewingram2• 4 years ago

I’ve been trying out the pre-release version for the last couple of months, just published a quick brain dump of my thoughts related to the major changes (router, server components, etc) as they stand today.

I’ve already heard from the team about the plan for my last concern, and it seems viable.

https://andrewingram.net/posts/thoughts-on-next-13-react-18-...

elforce002• 4 years ago

I started my journey with Vue, then Nuxt (of course),then switched to React and last year started to use Nextjs. So far I have no complains (at least no big ones).

With new frameworks poping out (qwik, remix, fresh, etc...), it's getting really interesting and tiresome at the same time.

We're migrating all our platforms to React/Next and we couldn't be happier. Is it perfect? Nothing really is. Next is good enough, the community is engaged, the ecosystem is big, and the industry is basically dominated by react (giving react devs some sort of peace of mind when looking or switching jobs).

Sometimes, you have to pick a piece of tech and roll with it as long as the tech keeps improving and the community improves alongside it. Nextjs is currently doing it.

Old_Thrashbarg• 4 years ago

I'm curious why you decided to migrate from Vue to React.

pen2l• 4 years ago

I'm pleased to see cumulative layout shift (re self-hosted fonts) advertised as a feature, this is the right kind of user-centric development, indeed the small details like these go a long way in improving user experience.

neurostimulant• 4 years ago

Not knowing anything about the new /app directory support, I'm able to migrate my static landing page in about two hours. The resulting page is definitely smaller and load faster than the previous version. Now I'm consistently getting 100 on page speed insight (mobile) while previously it's hovering around 98-99.

The documentation for the new /app directory support is not complete though. API routes seems to be not documented yet (or is it not implemented yet?) so I haven't ported mine and leave it on the /pages/api directory for now.

javiercr• 4 years ago

API routes are not supported yet for /app

Next.js 13

Related Stories