[Feedback] App Directory Beta

[leerob]

Next.js 13 introduces the app directory (beta) with new features and conventions. However, upgrading to Next.js 13 does not require using the app directory.

This discussion is where you can provide feedback on the new conventions and features around layouts, server components, streaming, and more.

If you have feedback on Turbopack, please use this discussion.

[icopp]

For me, the one big remaining question is how to handle form POSTs in this new structure. My company has interaction with the server built around progressively enhanced form handling (currently using next-runtime to get a more Remix-like experience), and this is one of the things I was hoping would be front and center, but so far it seems to be conspicuously missing.

[willemmulder]

Looking forward to this! Ideally, we could define mutations on the server and we can import them just like that on the client side and it works with typing and everything. Maybe something like https://github.com/Janpot/next-rpc would be awesome.

[icopp]

I think the ideal here would really be to have mutations and manually-triggered revalidations fundamentally use form POST/GET (as appropriate), so that you can have a page that works fine even with JS disabled. This would mean adding some handling around, e.g. form values being limited to strings, but I don't think that's really a hard blocker on anything. The need to route everything through client-side JS handling is IMO the biggest weakness with Next pre-13.x, and it would seem like a huge missed opportunity to me to not correct that with all the other emphasis on server-side handling.

[ggonchar]

@timneutkens I guess we are all excited to learn how the improved mutations and forms handle guidance will look (any teasers? ;)) I found using the RPC approach here quite promising. Both Server Components and Client Components using RPC have the same coding style when server-side functions can be just used directly inside React components. Let me share a quick example and a post to articulate the idea. Curious what you all think

[AliMejbar]

Mutations are the biggest question left unanswered by the new app directory for me. For an app, as opposed to a what some would call a "standard website", mutating data is as important, if not more so, than fetching it. The temporary workaround in the documentation feels sketchy. Moreover, the "beta" status is causing major API libraries (such as TRPC and Apollo GraphQL) to not attempt definitive implementations for fear of breaking changes. I don't mean to sound demanding, but I strongly believe that implementing mutations in an effective manner should be a top priority.

[musashi-garami]

I agree, literally bumped into needing do handle form data submissions, saw that mutations is still WIP. Very ampt for that to be sorted.

[juanferreras]

RE: On-demand Revalidation, there's a call out in Data Fetching > Revalidating Data, but it doesn't seem to appear listed elsewhere (nor on Roadmap).

It'd be great to understand the plan for On-demand Revalidation on the /app/ directory, whether eventually we could force-update a single segment (like we can do today in /pages/), many segments separately, a layout's own data, etc. Or whether it's not really planned in the near term and shouldn't be relied upon.

Many thanks!

[timneutkens]

This might help explain the rendering equivalents a bit: https://beta.nextjs.org/docs/rendering/fundamentals

Right now on-demand revalidation already works, if the page uses static rendering which is the case when you don't have a bailout on the page like calling cookies, headers, or a fetch with cache: 'no-store' you can on-demand revalidate that page.

In the future this will be expanded to be more granular than per-page deciding static rendering or dynamic rendering.

[nhayhoc]

I don't understand.
"cookies, headers, or a fetch with cache: 'no-store'" ==> this is work like getServerSideProps, alway call api and rerender from server, right?
I want page ISR, page render on build, and revalidate in background, for example i set it to 24h: next: { revalidate: 60 * 60 * 24 }, but suddenly i need to update new information, so how do i, for nextjs version 12 i use res.revalidate, so what something similar to res.revalidate in nextjs version 13, or is there another way to do the same function?

[iamhectorsosa]

I've also used a bit of Route Segment Config Options. It lets you configure behavior in layouts or pages by exporting the variables settings to your needs.

[shanekunz]

Is there a way to see what's causing a page to server render as opposed to static render? I've tried using export const dynamic = 'force-static' and not even that gets next build to show a circle icon (static) next to the outputted routes. Maybe the icons are bugged, because it does say "Generating static pages (4/4)" and so far, that is about the number of pages I have.

[luisorbaiceta]

div wrappers are created when working with nested layouts

I have noticed that when working with layouts everything gets wrapped with a div. This becomes really unhandy when working with relative dimensions. If I want a nested route to fill it's parent container with height: 100% this new wrapper gets in the way as we would need to target it somehow to make it fill the parent too

[tiennguyen00]

I had the same problem when I used React Three Fiber.

I use Canvas for the parent layout, and I add CSS "displays: contents" too. I got the error "Error: R3F: Link is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively"

I don't understand why we had "Link" in here. Is it because of the nested layout or not

[e2goon]

It seems undesirable for the framework to generate div tags at will. The reason is that you can't know the side effects unless you search.

I didn't have a good solution because I didn't have enough knowledge. I'm sorry to point it out. 😢

[Arctomachine]

Have anybody found a way to manually prevent scroll when using router? Having exactly same issue with toggling checkboxes as mentioned above.
To use display: contents workaround globally seems too much, because having scroll normally is good. But it seems to be impossible to localize it for specific page only.

[delbaoliveira]

Hi everyone, you'll be pleased to hear the app directory no longer adds additional <div>'s in the latest canary (13.0.7-canary.2). The scroll/focus management behavior is preserved.

[SyedAfzalHussain]

I just love its awesome.

[hasanaktas]

Even if react StrictMode is turned off, useEffect is run 2 times in new app directory.

[timneutkens]

Opened a PR here: #41894 Thanks!

[franzwarning]

Thanks @timneutkens ! So do you recommend keeping reactStrictMode enabled even with the useEffect running twice? Is that normal behavior w/ strict mode? (nvm, this is new in react 18 facebook/react#24502)

[eglove]

It's a dev only hint that maybe something is wrong. ;)

https://beta.reactjs.org/learn/you-might-not-need-an-effect

[heloineto]

It's a dev only hint that maybe something is wrong. ;)

https://beta.reactjs.org/learn/you-might-not-need-an-effect

Yes, but it should only work when StrictMode is turned on. StrictMode docs here

Your feedback is welcome, but I would advise against using emoticons in these scenarios, as they can be misinterpreted.

[made-by-jonny]

Attempting to use css modules in client components and the class names are applied but the css is not created, I am assuming (hoping) this is a bug.

[evanlihou]

Definitely running into the same issue here, and since Turbopack does not support SCSS at this time it's not a viable option if your modules aren't using plain ol' CSS

[icyJoseph]

As of next@13.0.1 this is supposed to be fixed, do try: #42106

[GGAlanSmithee]

using version 13.1.0 this is not just working. I simply followed the installation steps from the guide, and no styles are loaded in client, exactly as @made-by-jonny exaplained

[GGAlanSmithee]

It does work with Turbopack, not sure what the implications are. I guess it's not using proper CSS modules, but it's def. applying some scoping mechanism, generating classnames such as description◽[project-with-next]/app/page.module.css

[Saptak-Bose]

It has been fixed with the latest version of next.

[mm-webx]

[mm-webx]

martpie/next-transpile-modules#280

[timneutkens]

You no longer have to use next-transpile-modules, there's a built-in option: https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages

[ljcl]

Is this expected to work with CSS Modules (file.module.css) as well?

[timneutkens]

Yeah it should, are you seeing something else?

[jviide]

When using CSS Modules with transpilePackages I'm seeing similar errors as described in #41856 (comment).

[joshmanders]

What was the reason to switch from index.tsx in a folder route to become the root go to page.tsx? It just seems like a step backwards and if this is going to be the way moving forward, I assume if I have a route that is say /page then I can't do app/page.tsx anymore it has to be app/page/page.tsx, correct?

If that's the case, I find it's really ugly to have a bunch of folders with just a page.tsx in it for those pages that don't need extra layouts or anything.

[AndrewOttavianoAbb]

+1 to customizing file names. page.tsx everywhere gets hardish to track with a small app w/only a couple pages (in the POC I did), can't imagine what a large project would be like. In my mind, it doesn't scale as is and some of the suggestions here are on the right track.

[eglove]

@AndrewOttavianoAbb It's never gonna' happen.

We still talking about this? I think I'm gonna have to abandon this thread because it's just become the same repetitive complaints that have been answered 1,000 times.

It was nice to have this while it lasted. I would appreciate it if Vercel centralized all this into a referable blog so these threads that contain all the information don't get ruined and buried by random comments. Might be good to lock this at this point.

[Disorrder]

Naming is nice and clear, intuitive and understandable. I see no reason to change it or make customisable. Customisation bring a chaos among projects. Nextjs is a framework, frameworks have a lot of fixed stuff to make your work more easier.

[airtonix]

I actually don't like the lmao lets put everything that's not a route thing in the route things folder ...

everything in pages/* should be a browser router. in fact I go as far to say that there should only be "routing" paradigms in the the pages folder.

everything else should be imported from outside the pages folder 👍🏻

components/
  landing/
    HomPage/
      index.ts
      styles.css.ts
      HomePage.tsx
      HomePageContainer.tsx
      HomePage.stories.tsx
      HomePage.test.tsx
    LandingCard/
      index.ts
      styles.css.ts
      LandingCard.tsx
      LandingCardContainer.tsx
      LandingCard.test.tsx
      LandingCard.stories.tsx
    ...

  otherarea/
    ...etc

services/
  Auth/
    index.ts
    ...
  Theme/
    index.ts
    ...
  Cms/
    index.ts
    ...

config/
  index.ts

pages/
  index.tsx
  

That the nextjs team encourage putting everthing in the app directory feels like shortsighted thinking.

[Himanshu-holmes]

next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - You have enabled experimental feature (appDir) in next.config.js.
info - Thank you for testing appDir please leave your feedback at https://nextjs.link/app-feedback
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

event - compiled client and server successfully in 1472 ms (267 modules)
wait - compiling...
event - compiled client and server successfully in 514 ms (267 modules)
wait - compiling /page (client and server)...
event - compiled client and server successfully in 1174 ms (597 modules)

http://localhost:3000/ browser stuck at loading

[joshmanders]

To keep focus on the other question thread specific to that question, I'm making a new comment for another question...

If "Root Layout" is required and has <html /> and <body /> tags in it, does that mean the hideous wrapper <div id="__next" /> is not gone and all of our pages become direct children of <body />?

[devrojan]

I think I experienced the same with lastpass extension in my browser. It auto adds an element when you have an input. I just have a normal form with label and input in it. I don't have an issue when I turn off the extension.

[Andarist]

I got a bug report for Emotion recently that showcased to me how a Remix app gets broken with somebody's web extension. The root cause behind this that I've diagnosed is the same thing that is being discussed here - rehydrating the whole <html/>.

I'm not exactly sure what the real extension was trying to do. I only got a minimal repro that had this in the extension:

document.documentElement.appendChild(document.createElement('foo'))

Perhaps the issue reporters could shed some more light on what they are trying to achieve there to get some advice here. cc @flappyBug @lucascurti

While I agree that a lot of things can break the reconciliation - a custom container used as root was always a good enough boundary that allowed 3rd party things to work most of the time.

I'm also a little bit confused when it comes to useServerInsertedHTML. Things inserted when rendering the shell~ are inserted into <head/> and I'm not sure what kind of rule makes this OK here since that's bypassing React. How those extra <head/> children are OK? 🤔 cc @huozhi

[hourann]

The original issue @Andarist mentioned is here. I got report that some browser extension breaks our site style, including Urban VPN Proxy. I reviewed the compiled extension code, and reproduced a minimal extension to make this happen. The key point is that the extension injects new DOM element into the document in a content script runs at document_start

Another fun fact is to break React 18's hydrateRoot, one additional DOM element is enough. But to break the legacy hydrate, the extension need to append at least 2 DOM elements (no matter what).

[Andarist]

Just got another hydration warning related to this when investigating another reported issue:

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,data-loom-blur-type

This one doesn't blow the SSRed content as far as I can tell - but it's still super annoying. Both Loom and Grammarly are super popular extensions

[minervabot]

@sebmarkbage @timneutkens Wondering if the official position on this has changed at all?

[dephraiim]

I can't wait for API Routes support in the app directory

[giridhar7632]

In think, it would be great to include a suffix like *.function.js or *.function.ts within the directory specifically for creating serverless functions.

[karlhorky]

API Routes are now supported in the app/ directory since version 13.2.0 🎉 They are called Route Handlers and the convention is route.ts:

• Announcement blog post: https://nextjs.org/blog/next-13-2#custom-route-handlers
• Docs: https://beta.nextjs.org/docs/routing/route-handlers

[fachrur95]

How to get body in POST and PUT handlers?

[karlhorky]

export async function POST(request: NextRequest) {
  const body = await request.json();

Check out some examples here:

• https://github.com/upleveled/next-js-example-winter-2023-vienna-austria/blob/main/app/api/animals/route.ts
• https://github.com/upleveled/next-js-example-winter-2023-vienna-austria/blob/main/app/api/animals/%5BanimalId%5D/route.ts

[Jorgeisnotabot]

thank you @karlhorky

[IrakliK]

I am currently testing some stuff out in the app directory and im finding that i have a div wrapping around my page component

take a look at screenshots

folder struct

app/layout.tsx code

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

app/page.tsx code

export default function App() {
  return <h1 className="font-bold underline text-5xl">Hello World</h1>;
}

app/account/page.tsx code

export default function Account() {
  return <h1 className="font-bold underline text-5xl">Account World</h1>;
}

app/movie/page.tsx code

export default function Movie() {
  return <h1 className="font-bold underline text-5xl">Movie World</h1>;
}

[mohammadou1]

the first div should be replacing #__next I assume, but since there is no ID to target, it might inject multiple more?

[kayandra]

the first div should be replacing #__next I assume, but since there is no ID to target, it might inject multiple more?

#41745 (reply in thread)

[timneutkens]

You can read the reply here: #41745 (reply in thread) goal is to remove it but we can't do that yet 👍

[delbaoliveira]

Quick update: the app directory no longer adds additional <div>'s in the latest canary (13.0.7-canary.2).

[mohammadou1]

After little bit of trying,
I faced these 2 notes, will add more in case I faced any

• in nextjs13, the create-next-app and docs are using plain normal html head element, the eslinst is warning to use next/head
  is next/head dropped due to have layouts or actually its still better to use next/head?

• when trying to use i18n, ( which is still not documented ) got a message

Cannot read property '' of undefined
    at resolveModuleReference

[akoskm]

I'm running into the same problem, but the workaround @IhsenBouallegue suggested solved the issue for me.

[l4b4r4b4b4]

Does that mean that with the app folder it will no longer be possible to do domain-level-localization

No, you get full flexibility for whichever approach you want to take by leveraging middleware.js. Middleware allows you to rewrite an incoming hostname to a different path which is how that config option in Next.js does it.

Could you elaborate on how to exactly include localized text context with that approach or direct me to a resource?