5 ms·

Lee from Vercel here. Happy to answer any questions :) If you have any suggestions for how we can improve Next.js, let me know!

by leerob 6y ago

matthoiland 6y ago
Hey Lee, thank you for all your work! Big company here in Portland, and we just went all in on Next.js – so far our development speed has increased, and junior devs are easily onboarded. One request would be an official state management extension – coming from Vue and Vuex, this is something I miss. We're currently using Redux Toolkit, but would be great to have something official for Next along the lines of Vuex, Reframe, or Elm. * update (writing this between lots of meetings :| ) One huge value we get from Next is the opinions and conventions. Large dev teams benefit from this – which is why we've been using Ember and Ember Data for years, and Rails before that. Having an opinionated state management that plays nicely with Next on the client AND the server is what I'd like to see. We're doing quite a few workarounds currently with Redux to support managing state from within the components and during `getServerSideProps`. If all my dreams came true, it would be nice to persist state conditionally in Redis or Mongo. Sorry for the rambling thoughts – just loving Next, and incredibly busy building our new core IP with it.
- tony_landis 6y ago
  I like having the choice, for us immer and context usually is all we need beyond state & props so would not like to be forced into something opinionated. Free to choose just like you decide how to interface with your backend/state. Don’t turn this into a rails or danjo, please :)
  - matthoiland 6y ago
    I totally understand. The old Redux adage is "don't use it until you need to". Most apps won't need a big, opinionated state management – but when you do, it's nice having something robust, verbose, opinionated, and rails or django-like.
- monic 6y ago
  What kind of deep integration are you looking for with a preferred state framework?
  - matthoiland 6y ago
    If I closed my eyes and designed the API first, it would look like the `/pages` convention – just add state "slice" files in `/store` (like `src/store/user.ts`) and then use either React hooks inside the component (like `useStore` or `useMutation`) or use something (like `getServerSideState`) on the server. Your state "slices" would export initial state, types (optionally), and an object containing getters, setters, and mutations (using Vuex concepts).
- NoNonsense118 6y ago
  Vercel has a library for state management that's similar to React Query. https://swr.vercel.app/ https://swr.vercel.app/.
  - leerob 6y ago
    Note this is specifically for server caching state: https://leerob.io/blog/react-state-management https://leerob.io/blog/react-state-management
- leerob 6y ago
  Hey! Thanks for the kind words and glad you're enjoying Next.js. It's (basically) impossible for us to recommend a _single_ state management solution for all users, because state management means different things to different folks. Depending the industry and scale of your application, it also changes your state management needs. I wrote an in-depth guide on this here: https://leerob.io/blog/react-state-management https://leerob.io/blog/react-state-management
cyral 6y ago
One thing I would love to see is React router style routing. I know some people love the file based routing, but for complex web apps I just end up having to hack my own routing onto catch all routes. For example, there is no way to build sub-routers without doing it myself. (Imagine an account dashboard with a common area, but additional tabs for other sub-pages) Also, a global getServerSideProps ran on all pages would be great. I use getInitialProps in _app.tsx now to make a server side request to get initial user info (e.g. the current user name, access level, etc), but this method is ran on both client and server requests so it has some hacky stuff like returning early if window is undefined or if the requested url ends in .json (when next tries to load a new page on the client side)
- leerob 6y ago
  Thank you for the feedback! There is a workaround to use React Router with Next.js (https://gist.github.com/tannerlinsley/65ac1f0175d79d19762cf06650707830 https://gist.github.com/tannerlinsley/65ac1f0175d79d19762cf0...) and we're working on layouts support for Next.js, which will improve the routing story. And agreed on a better solution for global data fetching. This is being investigated as well.
gigel82 6y ago
It would be great if you guys can take another look at https://github.com/vercel/next.js/issues/18318 https://github.com/vercel/next.js/issues/18318 , lots of folks seem affected by it. Basically, there is no way to produce a truly static / SSR ( `next export`) build with i18n; this means one cannot host a multi-language site on a free hosting solution like GitHub pages.
- leerob 6y ago
  Thanks for the feedback! Next.js' i18n support adds a routing and language detection layer, which can't be easily replicated with `next export`. We're open to contributions for this, but it is a difficult problem to solve. Feel free to leave implementation suggestions on that issue.
0x142857 6y ago
react-router like nested routes!
- leerob 6y ago
  https://news.ycombinator.com/item?id=26971486 https://news.ycombinator.com/item?id=26971486
ilumanty 6y ago
next/image has been terribly slow to generate optimized images since 10.0.7. This issue is a blocker for several people, including myself, and there hasn't been any team response on GitHub yet: https://github.com/vercel/next.js/issues/23637 https://github.com/vercel/next.js/issues/23637
- leerob 6y ago
  You can also use any external service for optimizing images if you prefer not to use the built-in WebAssembly solution (which uses Squoosh (https://squoosh.app/ https://squoosh.app/). This was announced with the 10.1 blog post: https://nextjs.org/blog/next-10-1#nextimage-improvements https://nextjs.org/blog/next-10-1#nextimage-improvements Specific PR improving memory usage: https://github.com/vercel/next.js/pull/23565 https://github.com/vercel/next.js/pull/23565 Let us know if you're still seeing this issue after updating to 10.2 on the issue linked. Thanks!
gherkinnn 6y ago
No questions. Just wanted to say that you're doing an excellent job. Thanks!
- leerob 6y ago
  Hey, thank you! I appreciate that.
jerrygoyal 6y ago
Hey Lee, been following your work for a while. Could you please add your vote for "getStaticProps" for individual components also. That way I can use this component in multiple pages for example to statically rendering a tweet etc. (maybe useful for your blog too :) ) I think equivalent of this feature in gatsby is staticQuery https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/ https://www.gatsbyjs.com/docs/how-to/querying-data/static-qu... Same question I asked in r/nextjs https://www.reddit.com/r/nextjs/comments/mmqoqm/how_to_asynchronously_render_a_component_only/ https://www.reddit.com/r/nextjs/comments/mmqoqm/how_to_async... related discussion https://github.com/vercel/next.js/discussions/13390 https://github.com/vercel/next.js/discussions/13390
- leerob 6y ago
  getStaticProps for individual components will be solved with React Server Components! http://vercel.link/rsc http://vercel.link/rsc
eyelidlessness 6y ago
This isn’t so much about 10.2, but about Next’s plans/roadmap for static sites, particularly whether there are plans to provide official support for partial hydration. I like a lot of what Next brings in terms of DX polish. But I ultimately decided not to use it for recent projects, where the majority of the content is truly static. Next sends this content in HTML, then sends it again in JS. This not only adds unnecessary page weight, it also increases the uncanny valley before TTI. The current solution to this in Next is to mark an entire page as non-interactive. This means a page will send either no JS at all, or all of it. This isn’t ideal. There are several experimental projects exploring partial hydration with Next, but without official support they’re risky. There are also emerging projects like Astro providing similar functionality to Next with partial hydration as a core feature. I’d imagine the most obvious way to achieve something similar in Next will be SSG with React Server Components, but who knows when that will be stable. Anyway, curious if Vercel has anything to share on the topic.
- leerob 6y ago
  > I’d imagine the most obvious way to achieve something similar in Next will be SSG with React Server Components, but who knows when that will be stable. Sooner than you might think!
  - eyelidlessness 6y ago
    That’s cool! On a similar note I’m curious if you’ve encountered Astro[1] and if you have any thoughts on where Next/Astro overlap and where they might not. 1: astro.build

Lee from Vercel here. Happy to answer any questions :) If you have any suggestions for how we can improve Next.js, let me know!

by leerob 6y ago

Lee from Vercel here. Happy to answer any questions :) If you have any suggestions for how we can improve Next.js, let me know!

matthoiland 6y ago

Hey Lee, thank you for all your work! Big company here in Portland, and we just went all in on Next.js – so far our development speed has increased, and junior devs are easily onboarded. One request would be an official state management extension – coming from Vue and Vuex, this is something I miss. We're currently using Redux Toolkit, but would be great to have something official for Next along the lines of Vuex, Reframe, or Elm. * update (writing this between lots of meetings :| ) One huge value we get from Next is the opinions and conventions. Large dev teams benefit from this – which is why we've been using Ember and Ember Data for years, and Rails before that. Having an opinionated state management that plays nicely with Next on the client AND the server is what I'd like to see. We're doing quite a few workarounds currently with Redux to support managing state from within the components and during `getServerSideProps`. If all my dreams came true, it would be nice to persist state conditionally in Redis or Mongo. Sorry for the rambling thoughts – just loving Next, and incredibly busy building our new core IP with it.

tony_landis 6y ago
I like having the choice, for us immer and context usually is all we need beyond state & props so would not like to be forced into something opinionated. Free to choose just like you decide how to interface with your backend/state. Don’t turn this into a rails or danjo, please :)
- matthoiland 6y ago
  I totally understand. The old Redux adage is "don't use it until you need to". Most apps won't need a big, opinionated state management – but when you do, it's nice having something robust, verbose, opinionated, and rails or django-like.
monic 6y ago
What kind of deep integration are you looking for with a preferred state framework?
- matthoiland 6y ago
  If I closed my eyes and designed the API first, it would look like the `/pages` convention – just add state "slice" files in `/store` (like `src/store/user.ts`) and then use either React hooks inside the component (like `useStore` or `useMutation`) or use something (like `getServerSideState`) on the server. Your state "slices" would export initial state, types (optionally), and an object containing getters, setters, and mutations (using Vuex concepts).
NoNonsense118 6y ago
Vercel has a library for state management that's similar to React Query. https://swr.vercel.app/ https://swr.vercel.app/.
- leerob 6y ago
  Note this is specifically for server caching state: https://leerob.io/blog/react-state-management https://leerob.io/blog/react-state-management
leerob 6y ago
Hey! Thanks for the kind words and glad you're enjoying Next.js. It's (basically) impossible for us to recommend a _single_ state management solution for all users, because state management means different things to different folks. Depending the industry and scale of your application, it also changes your state management needs. I wrote an in-depth guide on this here: https://leerob.io/blog/react-state-management https://leerob.io/blog/react-state-management

cyral 6y ago

One thing I would love to see is React router style routing. I know some people love the file based routing, but for complex web apps I just end up having to hack my own routing onto catch all routes. For example, there is no way to build sub-routers without doing it myself. (Imagine an account dashboard with a common area, but additional tabs for other sub-pages) Also, a global getServerSideProps ran on all pages would be great. I use getInitialProps in _app.tsx now to make a server side request to get initial user info (e.g. the current user name, access level, etc), but this method is ran on both client and server requests so it has some hacky stuff like returning early if window is undefined or if the requested url ends in .json (when next tries to load a new page on the client side)

leerob 6y ago
Thank you for the feedback! There is a workaround to use React Router with Next.js (https://gist.github.com/tannerlinsley/65ac1f0175d79d19762cf06650707830 https://gist.github.com/tannerlinsley/65ac1f0175d79d19762cf0...) and we're working on layouts support for Next.js, which will improve the routing story. And agreed on a better solution for global data fetching. This is being investigated as well.

gigel82 6y ago

It would be great if you guys can take another look at https://github.com/vercel/next.js/issues/18318 https://github.com/vercel/next.js/issues/18318 , lots of folks seem affected by it. Basically, there is no way to produce a truly static / SSR ( `next export`) build with i18n; this means one cannot host a multi-language site on a free hosting solution like GitHub pages.

leerob 6y ago
Thanks for the feedback! Next.js' i18n support adds a routing and language detection layer, which can't be easily replicated with `next export`. We're open to contributions for this, but it is a difficult problem to solve. Feel free to leave implementation suggestions on that issue.

0x142857 6y ago

react-router like nested routes!

leerob 6y ago
https://news.ycombinator.com/item?id=26971486 https://news.ycombinator.com/item?id=26971486

ilumanty 6y ago

next/image has been terribly slow to generate optimized images since 10.0.7. This issue is a blocker for several people, including myself, and there hasn't been any team response on GitHub yet: https://github.com/vercel/next.js/issues/23637 https://github.com/vercel/next.js/issues/23637

leerob 6y ago
You can also use any external service for optimizing images if you prefer not to use the built-in WebAssembly solution (which uses Squoosh (https://squoosh.app/ https://squoosh.app/). This was announced with the 10.1 blog post: https://nextjs.org/blog/next-10-1#nextimage-improvements https://nextjs.org/blog/next-10-1#nextimage-improvements Specific PR improving memory usage: https://github.com/vercel/next.js/pull/23565 https://github.com/vercel/next.js/pull/23565 Let us know if you're still seeing this issue after updating to 10.2 on the issue linked. Thanks!

gherkinnn 6y ago

No questions. Just wanted to say that you're doing an excellent job. Thanks!

leerob 6y ago
Hey, thank you! I appreciate that.

jerrygoyal 6y ago

Hey Lee, been following your work for a while. Could you please add your vote for "getStaticProps" for individual components also. That way I can use this component in multiple pages for example to statically rendering a tweet etc. (maybe useful for your blog too :) ) I think equivalent of this feature in gatsby is staticQuery https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/ https://www.gatsbyjs.com/docs/how-to/querying-data/static-qu... Same question I asked in r/nextjs https://www.reddit.com/r/nextjs/comments/mmqoqm/how_to_asynchronously_render_a_component_only/ https://www.reddit.com/r/nextjs/comments/mmqoqm/how_to_async... related discussion https://github.com/vercel/next.js/discussions/13390 https://github.com/vercel/next.js/discussions/13390

leerob 6y ago
getStaticProps for individual components will be solved with React Server Components! http://vercel.link/rsc http://vercel.link/rsc

eyelidlessness 6y ago

This isn’t so much about 10.2, but about Next’s plans/roadmap for static sites, particularly whether there are plans to provide official support for partial hydration. I like a lot of what Next brings in terms of DX polish. But I ultimately decided not to use it for recent projects, where the majority of the content is truly static. Next sends this content in HTML, then sends it again in JS. This not only adds unnecessary page weight, it also increases the uncanny valley before TTI. The current solution to this in Next is to mark an entire page as non-interactive. This means a page will send either no JS at all, or all of it. This isn’t ideal. There are several experimental projects exploring partial hydration with Next, but without official support they’re risky. There are also emerging projects like Astro providing similar functionality to Next with partial hydration as a core feature. I’d imagine the most obvious way to achieve something similar in Next will be SSG with React Server Components, but who knows when that will be stable. Anyway, curious if Vercel has anything to share on the topic.

leerob 6y ago
> I’d imagine the most obvious way to achieve something similar in Next will be SSG with React Server Components, but who knows when that will be stable. Sooner than you might think!
- eyelidlessness 6y ago
  That’s cool! On a similar note I’m curious if you’ve encountered Astro[1] and if you have any thoughts on where Next/Astro overlap and where they might not. 1: astro.build