NextJS 13 Example with app directory

[ODelibalta]

Subject

Example setup for NextJS 13 with the app directory

Description

Hello there,

I'd love to see an example repo using the next js 13 with only the app directory. I have been trying to get mine to work but to no avail. Firefox console is still showing errors after I "managed" to resolve the previous ones.

I decided to take a look at your documentation in depth but now I am more confused. Under Getting Started > Frameworks > NextJS, the documentation states that you need to convert them into client-side component by adding a 'use client'; at the top of your file. which is fine.

but

in NextJS documentation (beta dot nextjs dot org) under Routing > Pages and Layouts, they state that The root layout is a [Server Component](https://beta.nextjs.org/docs/rendering/server-and-client-components) by default and can not be set to a [Client Component](https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components)....

so which is it?

Is this why I have been having issues?

I'd really appreciate a working skeleton example repo with nextjs13 using ONLY the app directory (sorry for the caps but mine is a fresh 13 app)

Thank you,

[ODelibalta]

I moved my Chakra provider to a component and made that component client side, leaving the root layout server side per docs.

  return (
    <ChakraProvider theme={proTheme}>
      <ColorModeScript initialColorMode={"dark"} />
      {children}
    </ChakraProvider>
  );

Now I am getting Warning: Extra attributes from the server: class in Firefox. If I take the Colormode off, the error goes away. I realize this is more of a technical detail than docs but a working example might help me with seeing what it is that I am doing wrong.

[faelfernandes]

I would also like to know how do I implement this app/layout directory using chakra ui. I found this post saying it's not supported yet Twitter

[ODelibalta]

[noobinthisgame]

Hey @ODelibalta,

we merged docs for our Next.js 13 support today with https://github.com/chakra-ui/chakra-ui-docs/pull/1427

Closing this Issue :)