Guide with Next 13? #815
Replies: 3 comments 3 replies
-
|
x2 |
Beta Was this translation helpful? Give feedback.
-
|
Yeh same here, has anyone figured this out yet? |
Beta Was this translation helpful? Give feedback.
-
|
I got this working actually by just wrapping the 'use client'
import { GeistProvider, CssBaseline } from '@geist-ui/core'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<GeistProvider>
<CssBaseline />
{children}
</GeistProvider>
</body>
</html>
)
} |
Beta Was this translation helpful? Give feedback.
-
|
That's with all my components set to |
Beta Was this translation helpful? Give feedback.
-
|
Please try wrapping the provider and component in the file where 'use client' is declared. in 'use client'
import { GeistProvider, CssBaseline } from '@geist-ui/core'
const Provider = ({ children }: { children: React.ReactNode }) => {
return (
<GeistProvider themeType={'light'}>
<CssBaseline />
{children}
</GeistProvider>
)
}
export default Providerin 'use client'
export * from '@geist-ui/core'in import Provider from './Provider'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}in import { Button, Page, Text } from './common/geist-ui/components'
export default function Home() {
return (
<Page>
<Text h1>Home Page</Text>
<Button>Submit</Button>
</Page>
)
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, I did get something like that working actuallyOn 3 Jun 2023, at 09:04, atolix ***@***.***> wrote:
@robinhayward
Please try wrapping the provider and component in the file where 'use client' is declared.
in Provider.tsx:
'use client'
import { GeistProvider, CssBaseline } from ***@***.***/core'
const Provider = ({ children }: { children: React.ReactNode }) => {
return (
<GeistProvider themeType={'light'}>
<CssBaseline />
{children}
</GeistProvider>
)
}
export default Provider
in common/geist-ui/components/index.tsx:
'use client'
export * from ***@***.***/core'
in layout.tsx:
import Provider from './Provider'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}
in page.tsx:
import { Button, Page, Text } from './common/geist-ui/components'
export default function Home() {
return (
<Page>
<Text h1>Home Page</Text>
<Button>Submit</Button>
</Page>
)
}
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
Hello, I'm learning Next 13 and a bit confused on how to use geist with the new app experimental dir of Next 13. Is there any guide on how to use it? Because with Next 12 in order to use geist server side components. you had to change _document.js, but with this version there is not _document.js (as far as i know), instead there is layout.js. Maybe is very similar but i dont understand it very well yet
Beta Was this translation helpful? Give feedback.
All reactions