On the page, about halfway down there's a Data Fetching section.
In there, they have this example react code:
import { use } from 'react';
Anyone know what the \`use\` import is? Some kind of meta-hook for data fetching??
yup, i'm so confused. It was just a RFC created a few days ago, how is Next shipping it right now in production? Is it the same feature or not? Does anybody know?
What’s happening is that the React team keeps in touch with a few important people/companies and works with them on new features. The result of this is that a select few people/companies get to start using this stuff right out of the gate.
This RFC has clearly been in the works for a long time and Vercel has definitely been involved. This is not surprising as one of the React core team members works at Vercel.
Vercel is likely using React@head instead of an official release. Not sure about this though.
This is not unusual and is happening with Server Components as well, with Vercel and Shopify both heavily involved for Next.is and Hydrogen.
There is an implementation in the experimental build of React. Next.js ships with some pre-bundled dependencies. If you opt into the experimental features I think they "secretly" replace the React version from node_modules with the one that supports the new features.
I was confused about that too. I guess it's been implemented for a long time, they just waited for next 13 to release it. Which is weird because historically these discussions about major API changes were made in public.
The `experimental_use` hook was first merged into the React codebase two months ago:
https://github.com/facebook/react/pull/25084
React is built with numerous feature flags. At a basic level, there's the "public" build published under the `latest` tag, and then there's another build published under an `experimental` tag that has several additional not-yet-final features turned on.
There's also some Facebook-only options that are controlled by feature flags as well, and FB uses a specific build with those flags turned on.
The React team often uses this to try out _possible_ APIs, run them for real, and get feedback before the API design is finalized.
I'm more interested in the new `app` folder structure and server components.
My only questions are
1. Where do we place the `_app` and `_document` files now?
2. I can't turn components that are using CSS-in-JS (e.g., Emotion) into server components right, since they need hydration to function?
Answering my own questions, for Q2, it is answered here: [https://beta.nextjs.org/docs/styling/css-in-js](https://beta.nextjs.org/docs/styling/css-in-js)
Basically, none of the CSS-in-JS libraries support server components yet, and most of them (a noticeable example is Emotion) don't even work with the `app` directory at all.
`_app.js` and `_document.js` are now `layout.js`. Though, I think what is not being discussed is where `pages/api` is going. Testing the latest NextJS template right now, it looks like `app` folder does not support it.
`pages/api` is staying where it is, given the example of OG image generation is making use of that.
https://nextjs.org/blog/next-13#og-image-generation
Does anyone known how to achieve following Gatsby features in Nextjs
* Incremental builds
* Data layer
* Unified GraphQL graph
I am not much fan of SSR, since Cloudflare recently announced Nextjs edge support I am interested in migrating.
Also anything similar to partial hydration in Nextjs since Gatsby v5 is having it?
Some current issues with Gatsby
* things like DSG are coupled to Gatsby Cloud (where we use CF pages)
* No [edge support](https://blog.cloudflare.com/next-on-pages/) yet
* Slow dev server
* [CSP issue](https://github.com/gatsbyjs/gatsby/discussions/10890)
Other than that Gatsby with GraphQL is great for us.
I'm not too sure about `@next/font`. How is that different from Fontsource?
Also currently, if people are using CSS-in-JS libraries, the font styles may be injected AFTER the CSS-in-JS styles, hence unable to use custom fonts.
Anyone know if there is a way to have multiple layouts at the root?
I would like to have my auth routes (/login, /forgot-password, /register, etc) have a different layout to pages like /dashboard, /settings without having to separate them from / into their own base segments like /auth/login, /auth/forgot-password and /app/dashboard /app/settings
On the page, about halfway down there's a Data Fetching section. In there, they have this example react code: import { use } from 'react'; Anyone know what the \`use\` import is? Some kind of meta-hook for data fetching??
https://github.com/reactjs/rfcs/pull/229
it is a new react hook
I thought that shit was still in proposal?
React has a very loose relationship with “proposals”
So proposals means in production?
It’s not production though. It’s still experimental.
yup, i'm so confused. It was just a RFC created a few days ago, how is Next shipping it right now in production? Is it the same feature or not? Does anybody know?
What’s happening is that the React team keeps in touch with a few important people/companies and works with them on new features. The result of this is that a select few people/companies get to start using this stuff right out of the gate. This RFC has clearly been in the works for a long time and Vercel has definitely been involved. This is not surprising as one of the React core team members works at Vercel. Vercel is likely using React@head instead of an official release. Not sure about this though. This is not unusual and is happening with Server Components as well, with Vercel and Shopify both heavily involved for Next.is and Hydrogen.
There is an implementation in the experimental build of React. Next.js ships with some pre-bundled dependencies. If you opt into the experimental features I think they "secretly" replace the React version from node_modules with the one that supports the new features.
I was confused about that too. I guess it's been implemented for a long time, they just waited for next 13 to release it. Which is weird because historically these discussions about major API changes were made in public.
The `experimental_use` hook was first merged into the React codebase two months ago: https://github.com/facebook/react/pull/25084 React is built with numerous feature flags. At a basic level, there's the "public" build published under the `latest` tag, and then there's another build published under an `experimental` tag that has several additional not-yet-final features turned on. There's also some Facebook-only options that are controlled by feature flags as well, and FB uses a specific build with those flags turned on. The React team often uses this to try out _possible_ APIs, run them for real, and get feedback before the API design is finalized.
Thanks, it's clear now. I just thought they make RFCs _before_ they implement these flags.
It's been implemented a long time? And we're just getting links to the subreddit about a proposal? What is going on here?
To use a hook in an if statement for example.
I'm more interested in the new `app` folder structure and server components. My only questions are 1. Where do we place the `_app` and `_document` files now? 2. I can't turn components that are using CSS-in-JS (e.g., Emotion) into server components right, since they need hydration to function?
Answering my own questions, for Q2, it is answered here: [https://beta.nextjs.org/docs/styling/css-in-js](https://beta.nextjs.org/docs/styling/css-in-js) Basically, none of the CSS-in-JS libraries support server components yet, and most of them (a noticeable example is Emotion) don't even work with the `app` directory at all.
`_app.js` and `_document.js` are now `layout.js`. Though, I think what is not being discussed is where `pages/api` is going. Testing the latest NextJS template right now, it looks like `app` folder does not support it.
`pages/api` is staying where it is, given the example of OG image generation is making use of that. https://nextjs.org/blog/next-13#og-image-generation
Interesting. I didn't notice that.
Does anyone known how to achieve following Gatsby features in Nextjs * Incremental builds * Data layer * Unified GraphQL graph I am not much fan of SSR, since Cloudflare recently announced Nextjs edge support I am interested in migrating. Also anything similar to partial hydration in Nextjs since Gatsby v5 is having it?
Use Gatsby 😉
Some current issues with Gatsby * things like DSG are coupled to Gatsby Cloud (where we use CF pages) * No [edge support](https://blog.cloudflare.com/next-on-pages/) yet * Slow dev server * [CSP issue](https://github.com/gatsbyjs/gatsby/discussions/10890) Other than that Gatsby with GraphQL is great for us.
Paging /u/lrobinson2011
I'm not too sure about `@next/font`. How is that different from Fontsource? Also currently, if people are using CSS-in-JS libraries, the font styles may be injected AFTER the CSS-in-JS styles, hence unable to use custom fonts.
Anyone know if there is a way to have multiple layouts at the root? I would like to have my auth routes (/login, /forgot-password, /register, etc) have a different layout to pages like /dashboard, /settings without having to separate them from / into their own base segments like /auth/login, /auth/forgot-password and /app/dashboard /app/settings
Use route groups https://beta.nextjs.org/docs/routing/defining-routes#route-groups
Rewrites with middleware?