Hacker News Reader

Comment by leerob | Hacker News Reader

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

View on HN

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)

Thank you for the feedback! There is a workaround to use React Router with Next.js (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.

It would be great if you guys can take another look at 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.

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.

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.

Vercel has a library for state management that's similar to React Query. https://swr.vercel.app/.

Note this is specifically for server caching state: https://leerob.io/blog/react-state-management

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

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 :)

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.

What kind of deep integration are you looking for with a preferred state framework?

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).

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.

> 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!

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

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-qu...

Same question I asked in r/nextjs https://www.reddit.com/r/nextjs/comments/mmqoqm/how_to_async...

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

No questions.

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

Hey, thank you! I appreciate that.

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

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/). This was announced with the 10.1 blog post: https://nextjs.org/blog/next-10-1#nextimage-improvements

Specific PR improving memory usage: 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!

react-router like nested routes!

https://news.ycombinator.com/item?id=26971486

Reply on news.ycombinator.com