6 ms·

Next.js 13.4

46 points by leerob 3y ago

ivanakcheurov 3y ago
Is “API first” principle obsolete nowadays? How can Server Actions allow other clients to use the same backend? That was the whole point of SPAs, mobile clients communicating only over REST/GraphQL so that you can add more clients/automation/consumers later. To do that properly, the endpoint needs to be secured and documented (Swagger or GraphiQL with autogeneration of client libraries in most languages).
edgyquant 3y ago
I like working with next but some of these changes in 13 kinda suck. Router especially, I inherited a codebase that didn't wrap a lot of functionality so hard changes to the way useRouter works from 12 to 13 means I can't reasonably upgrade anytime soon.
- benatkin 3y ago
  I was curious, so I took a look: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks https://nextjs.org/docs/app/building-your-application/upgrad... Depending on the app it could be easy or difficult.
nickisnoble 3y ago
Annoying that they hyped up this live keynote, and then it was all previous / pre-recorded announcements. I figured with all the other releases, this keynote would show something really big — maybe they should've saved the databases reveal. Instead we get "the thing we announced months ago is out of beta". Vercel, you've been inconsiderate with my time.
- leerob 3y ago
  The keynote was the summary of the entire week, which included the intro/outro, visual editing section, and the Next.js section which were new. A lot of folks were just tuning in today, versus the start of the week, but yeah, I can empathize with there being some parts that overlap. We'll be publishing more Next.js content here in the coming weeks around the new features as well.
  - yeskia 3y ago
    Yeah - "keynote" seemed to imply a big presentation. Not 15 minutes, most of which was literally already released video content. Now confused what is the point of "day 5" if the big reveal is done.
- benatkin 3y ago
  > live keynote, and then it was all previous / pre-recorded announcements Those appear to be mostly equivalent if you're watching it online. If you don't feel they're almost equivalent, lockdown might have been easier. Personally I find online conferences disappointing and only watch if it's the same sort of content I would watch in a simple video.
0xblinq 3y ago
It's astonishing how complex this has become. All the server component stuff is great technologically speaking and if you're using React, it's a very welcome thing as this will lead in the long term to less bloated applications for end users. But as a developer I just can't stand all the complexity and the magic going on. And now a React compiler is on its way too. This is just too much.
- davnicwil 3y ago
  > now a React compiler is on its way too I googled for this and couldn't find anything. Do you have any links that give more info about this?
  - matvp 3y ago
    There isn't much info out there yet, but this video is a small preview: https://youtu.be/lGEMwh32soc https://youtu.be/lGEMwh32soc The latest update is mentioned in the March 2023 blog post: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler https://react.dev/blog/2023/03/22/react-labs-what-we-have-be...
    - davnicwil 3y ago
      Ah, interesting! My tldr of this is it'll be a transform of easy to read idiomatic react code using hooks etc into more performant code that avoids unnecessary rerenders by statically analysing where optimisations like memoisation can be injected without changing behavior. Pretty smart stuff but also, yeah, perhaps a bit of a black hole of complexity. I can immediately imagine issues with debugging or somehow relying on the side effects of spurious rerenders and that breaking things in the real world. You'd hope code like this does not exist in the wild... and yet exist it does :-)
      - 0xblinq 3y ago
        As I replied above, all is neat and great until you have to debug something not working as expected.
cranglin 3y ago
I've been using the App Router beta for a few months on a pre-production project. No major complaints and I can see the vision. However, I (understandably) had a big issue with implementing Algolia Instant Search SSR into it. Fingers-crossed that 3rd party libraries launch support for it soon.
- leerob 3y ago
  That's a good flag. I'll reach out to the Algolia team to talk about this.
  - cranglin 3y ago
    Thanks! Here's a GH Issue about it that I follow: https://github.com/algolia/instantsearch/discussions/5413#discussioncomment-5807657 https://github.com/algolia/instantsearch/discussions/5413#di... Feel free to reach out. My GitHub is @Colton
kylehotchkiss 3y ago
A big benefit of the pages folder is the ability to statically generate content on build time and deploy, then getting the performance benefit of being a static site. Does/will the app folder allow for the same static generation capability? Seeing `Is the pages directory going away?` in the release notes to me seems like a hint that the pages directory may be going away.
- MalseMattie 3y ago
  Yes, the app router allows for the same static generation.[0] It is the default rendering strategy, and the page only becomes "dynamic" (rendered at request time) if the page has a "dynamic function". (functions that use URL search params etc.) [0] https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering https://nextjs.org/docs/app/building-your-application/render...
  - leerob 3y ago
    Further, you can statically export your application to HTML, CSS, and JS files and host without a server: https://nextjs.org/docs/app/building-your-application/deploying/static-exports https://nextjs.org/docs/app/building-your-application/deploy...
    - kylehotchkiss 3y ago
      This is one of my favorite ways to build Next.js sites, and adding in Dynamic when needed is Next's superpower. Thanks for noting the the new app/ folder supports it!
reducesuffering 3y ago
I've been using the app/ dir for a couple months now on a side project and I'm really liking how concisely I can build UI + backend + deployment. Vercel is getting some heat for it's pricing, but Next.js is really pushing forward what's possible for people without fiddling with DevOps, separate frontend deployment, separate backend deployment, etc. Coming from Django with Create React App, Django Rest Framework, on a VPS, is a relative nightmare compared to Next. For example, in one small file, two functions, you have a reactive UI, styling (Tailwind), backend with database fetching, routing, and deployment handled: async function getPostsFromDb() { return await prisma.posts.findMany(); } export default async function PostsPage() { const posts= await getPostsFromDb(); return ( <main className="flex min-h-screen flex-col items-center justify-center"> {posts.map((post) => { return ( <GradientCard key={post.name} title={post.name} /> ); })} </main> ); }
- benatkin 3y ago
  Their pricing seems OK to me, the only issue I have is that you can't tell them just to shut it down if the bill goes past a certain limit.
- CharlieDigital 3y ago
  > ...in one small file, two functions, you have a reactive UI, styling (Tailwind), backend with database fetching, routing, and deployment handled Sounds like a recipe for spaghetti. Other platforms have been here before (ASP.NET Web Forms comes to mind) and it always ends up bad.
Escapado 3y ago
Really hyped about this! I can't wait to try it out and watching the CI build as we speak. I am curious however about a few points. From their examples in the blog post it's not clear what kind of payloads can be transfered when using server actions. Do they need to be serializable in a specific way? Can I transfer dates? Can they return something (in case I want to validate a form on the server and return an error or a success code)? How does it figure out that the db import will not be bundled into the client? Because it is only used in the function with the "use server" directive? And finally: Can I call "use server" functions in a client component too? In case I want some extra state in there? Maybe there is someone here who knows more!
- sionarancsle 3y ago
  They are just POST requests to an under-the-hood generated API endpoint.. I don't understand the use-case of these. Makes form validation and basically any type of reactivity bad.
pwnstar4ever 3y ago
After running Next.js in production for a few years I never want to touch it again. I haven't used Vercel, but hosting on AWS I had to patch configurations in dirty ways just to get it to run reliably. I suspect they "locked" things like node config behind the abstraction of Next.js to drive users to their platform where issues are "magically" solved.
- c-hendricks 3y ago
  Counterpoint, we deployed our first nextjs app on AWS last year and it's been very set-and-forget. Even with our hacky https in front of nextjs.
  - shitlord 3y ago
    Are you using server side rendering? If so, did you end up writing a custom server, or are you monitoring your website some other way? My team is developing a server-rendered nextjs app which is deployed on AWS. We haven't really configured it beyond the defaults, but nextjs seems to provide very little visibility into what's happening (e.g., no request logs). If you could share any tips or lessons learned from operating a production nextjs app, it would be much appreciated.
    - cbovis 3y ago
      Have you considered NextJS middleware to decorate with request logging? https://nextjs.org/docs/pages/building-your-application/routing/middleware https://nextjs.org/docs/pages/building-your-application/rout...
      - shitlord 3y ago
        Thanks, that is helpful. The OpenTelemetry integration seems like it will provide the most useful insights.
      - willcipriano 3y ago
        Your load balancer/http server should have the request logs, are you running it bare?
poisonborz 3y ago
We recently launched a rather complex multi-market B2B booking system for a larger company on it. I was afraid of possible backend limitations and the opinionated structure that often comes with such projects, but it was a complete bliss to be honest. It takes away SO MUCH of the boilerplate with setting up a modern web CRUD project. Community and utils like i18next and NextAuth are top notch as well. Things I might have missed like API middlewares were added in meanwhile. No wonder that it starts to become the standard React framework. Surprised about the negativity here.
vsroy 3y ago
Server actions is amazing. I finally will never need to write a single POST/GET request, it's the perfect RPC.
flashgordon 3y ago
Sigh. I'm a huge fan of next. But am getting a bit worried. As a backend person, Next made it possible for me to build cool pages easily - especially as a static export to be served by my backend of choice. This whole push towards forcing an entire stack worries me. I personally am not building consumer apps so am ok with server side routing and/or spas and it feels like every new version the disapproving nod on "no outside backbends" is getting stronger. (As a services developer I personally don't find the ROI on the rest of the vercel ecosystem either but I can see why they need to sell the kitchen sink to justify that crazy valuation)

46 points by leerob 3y ago

Is “API first” principle obsolete nowadays? How can Server Actions allow other clients to use the same backend? That was the whole point of SPAs, mobile clients communicating only over REST/GraphQL so that you can add more clients/automation/consumers later. To do that properly, the endpoint needs to be secured and documented (Swagger or GraphiQL with autogeneration of client libraries in most languages).

edgyquant 3y ago

I like working with next but some of these changes in 13 kinda suck. Router especially, I inherited a codebase that didn't wrap a lot of functionality so hard changes to the way useRouter works from 12 to 13 means I can't reasonably upgrade anytime soon.

benatkin 3y ago
I was curious, so I took a look: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks https://nextjs.org/docs/app/building-your-application/upgrad... Depending on the app it could be easy or difficult.

nickisnoble 3y ago

Annoying that they hyped up this live keynote, and then it was all previous / pre-recorded announcements. I figured with all the other releases, this keynote would show something really big — maybe they should've saved the databases reveal. Instead we get "the thing we announced months ago is out of beta". Vercel, you've been inconsiderate with my time.

leerob 3y ago
The keynote was the summary of the entire week, which included the intro/outro, visual editing section, and the Next.js section which were new. A lot of folks were just tuning in today, versus the start of the week, but yeah, I can empathize with there being some parts that overlap. We'll be publishing more Next.js content here in the coming weeks around the new features as well.
- yeskia 3y ago
  Yeah - "keynote" seemed to imply a big presentation. Not 15 minutes, most of which was literally already released video content. Now confused what is the point of "day 5" if the big reveal is done.
benatkin 3y ago
> live keynote, and then it was all previous / pre-recorded announcements Those appear to be mostly equivalent if you're watching it online. If you don't feel they're almost equivalent, lockdown might have been easier. Personally I find online conferences disappointing and only watch if it's the same sort of content I would watch in a simple video.

0xblinq 3y ago

It's astonishing how complex this has become. All the server component stuff is great technologically speaking and if you're using React, it's a very welcome thing as this will lead in the long term to less bloated applications for end users. But as a developer I just can't stand all the complexity and the magic going on. And now a React compiler is on its way too. This is just too much.

davnicwil 3y ago
> now a React compiler is on its way too I googled for this and couldn't find anything. Do you have any links that give more info about this?
- matvp 3y ago
  There isn't much info out there yet, but this video is a small preview: https://youtu.be/lGEMwh32soc https://youtu.be/lGEMwh32soc The latest update is mentioned in the March 2023 blog post: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler https://react.dev/blog/2023/03/22/react-labs-what-we-have-be...
  - davnicwil 3y ago
    Ah, interesting! My tldr of this is it'll be a transform of easy to read idiomatic react code using hooks etc into more performant code that avoids unnecessary rerenders by statically analysing where optimisations like memoisation can be injected without changing behavior. Pretty smart stuff but also, yeah, perhaps a bit of a black hole of complexity. I can immediately imagine issues with debugging or somehow relying on the side effects of spurious rerenders and that breaking things in the real world. You'd hope code like this does not exist in the wild... and yet exist it does :-)
    - 0xblinq 3y ago
      As I replied above, all is neat and great until you have to debug something not working as expected.

cranglin 3y ago

I've been using the App Router beta for a few months on a pre-production project. No major complaints and I can see the vision. However, I (understandably) had a big issue with implementing Algolia Instant Search SSR into it. Fingers-crossed that 3rd party libraries launch support for it soon.

leerob 3y ago
That's a good flag. I'll reach out to the Algolia team to talk about this.
- cranglin 3y ago
  Thanks! Here's a GH Issue about it that I follow: https://github.com/algolia/instantsearch/discussions/5413#discussioncomment-5807657 https://github.com/algolia/instantsearch/discussions/5413#di... Feel free to reach out. My GitHub is @Colton

kylehotchkiss 3y ago

A big benefit of the pages folder is the ability to statically generate content on build time and deploy, then getting the performance benefit of being a static site. Does/will the app folder allow for the same static generation capability? Seeing `Is the pages directory going away?` in the release notes to me seems like a hint that the pages directory may be going away.

MalseMattie 3y ago
Yes, the app router allows for the same static generation.[0] It is the default rendering strategy, and the page only becomes "dynamic" (rendered at request time) if the page has a "dynamic function". (functions that use URL search params etc.) [0] https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering https://nextjs.org/docs/app/building-your-application/render...
- leerob 3y ago
  Further, you can statically export your application to HTML, CSS, and JS files and host without a server: https://nextjs.org/docs/app/building-your-application/deploying/static-exports https://nextjs.org/docs/app/building-your-application/deploy...
  - kylehotchkiss 3y ago
    This is one of my favorite ways to build Next.js sites, and adding in Dynamic when needed is Next's superpower. Thanks for noting the the new app/ folder supports it!

reducesuffering 3y ago

I've been using the app/ dir for a couple months now on a side project and I'm really liking how concisely I can build UI + backend + deployment. Vercel is getting some heat for it's pricing, but Next.js is really pushing forward what's possible for people without fiddling with DevOps, separate frontend deployment, separate backend deployment, etc. Coming from Django with Create React App, Django Rest Framework, on a VPS, is a relative nightmare compared to Next. For example, in one small file, two functions, you have a reactive UI, styling (Tailwind), backend with database fetching, routing, and deployment handled: async function getPostsFromDb() { return await prisma.posts.findMany(); } export default async function PostsPage() { const posts= await getPostsFromDb(); return ( <main className="flex min-h-screen flex-col items-center justify-center"> {posts.map((post) => { return ( <GradientCard key={post.name} title={post.name} /> ); })} </main> ); }

benatkin 3y ago
Their pricing seems OK to me, the only issue I have is that you can't tell them just to shut it down if the bill goes past a certain limit.
CharlieDigital 3y ago
> ...in one small file, two functions, you have a reactive UI, styling (Tailwind), backend with database fetching, routing, and deployment handled Sounds like a recipe for spaghetti. Other platforms have been here before (ASP.NET Web Forms comes to mind) and it always ends up bad.

Escapado 3y ago

Really hyped about this! I can't wait to try it out and watching the CI build as we speak. I am curious however about a few points. From their examples in the blog post it's not clear what kind of payloads can be transfered when using server actions. Do they need to be serializable in a specific way? Can I transfer dates? Can they return something (in case I want to validate a form on the server and return an error or a success code)? How does it figure out that the db import will not be bundled into the client? Because it is only used in the function with the "use server" directive? And finally: Can I call "use server" functions in a client component too? In case I want some extra state in there? Maybe there is someone here who knows more!

sionarancsle 3y ago
They are just POST requests to an under-the-hood generated API endpoint.. I don't understand the use-case of these. Makes form validation and basically any type of reactivity bad.

pwnstar4ever 3y ago

After running Next.js in production for a few years I never want to touch it again. I haven't used Vercel, but hosting on AWS I had to patch configurations in dirty ways just to get it to run reliably. I suspect they "locked" things like node config behind the abstraction of Next.js to drive users to their platform where issues are "magically" solved.

c-hendricks 3y ago
Counterpoint, we deployed our first nextjs app on AWS last year and it's been very set-and-forget. Even with our hacky https in front of nextjs.
- shitlord 3y ago
  Are you using server side rendering? If so, did you end up writing a custom server, or are you monitoring your website some other way? My team is developing a server-rendered nextjs app which is deployed on AWS. We haven't really configured it beyond the defaults, but nextjs seems to provide very little visibility into what's happening (e.g., no request logs). If you could share any tips or lessons learned from operating a production nextjs app, it would be much appreciated.
  - cbovis 3y ago
    Have you considered NextJS middleware to decorate with request logging? https://nextjs.org/docs/pages/building-your-application/routing/middleware https://nextjs.org/docs/pages/building-your-application/rout...
    - shitlord 3y ago
      Thanks, that is helpful. The OpenTelemetry integration seems like it will provide the most useful insights.
    - willcipriano 3y ago
      Your load balancer/http server should have the request logs, are you running it bare?

poisonborz 3y ago

We recently launched a rather complex multi-market B2B booking system for a larger company on it. I was afraid of possible backend limitations and the opinionated structure that often comes with such projects, but it was a complete bliss to be honest. It takes away SO MUCH of the boilerplate with setting up a modern web CRUD project. Community and utils like i18next and NextAuth are top notch as well. Things I might have missed like API middlewares were added in meanwhile. No wonder that it starts to become the standard React framework. Surprised about the negativity here.

vsroy 3y ago

Server actions is amazing. I finally will never need to write a single POST/GET request, it's the perfect RPC.

flashgordon 3y ago

Sigh. I'm a huge fan of next. But am getting a bit worried. As a backend person, Next made it possible for me to build cool pages easily - especially as a static export to be served by my backend of choice. This whole push towards forcing an entire stack worries me. I personally am not building consumer apps so am ok with server side routing and/or spas and it feels like every new version the disapproving nod on "no outside backbends" is getting stronger. (As a services developer I personally don't find the ROI on the rest of the vercel ecosystem either but I can see why they need to sell the kitchen sink to justify that crazy valuation)