Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Providers and Next.js #1147

Closed
polmoneys opened this issue Oct 6, 2020 · 2 comments
Closed

Providers and Next.js #1147

polmoneys opened this issue Oct 6, 2020 · 2 comments

Comments

@polmoneys
Copy link

polmoneys commented Oct 6, 2020 •
edited
Loading

❔ Question

Hola 💐. which Providers should I use on a Next.js project ?

🔦 Context

Related docs:

react-spectrum SSRProvider, react-spectrum SSRProvider II, react-aria SSRProvider, react-aria I18nProvider.

It seems all the info is on the docs yet I'm not confident on how to use it. There is a linked repo with next.js that uses only react-aria SSRProvider on a page.js.

I guess my question is twofold:

  • which Provider should we use ? Is there any hierarchy we should follow ?
  • can we move from page.js to _app.js ?

💻 Code Sample

Is A) enough ?

// pages/_app.js

import { Provider, defaultTheme } from '@adobe/react-spectrum'; 

function MyApp({ Component, pageProps }) {
  return <Provider theme={theme} locale={locale}>
       <Component {...pageProps} />
</Provider>
}

Is B) accomplishing the same as A) above ?

// pages/_app.js

import { SSRProvider } from '@react-aria/ssr'; 
import { I18nProvider, useLocale } from '@react-aria/i18n'; 

function MyApp({ Component, pageProps }) {
  return <SSRProvider theme={theme} >
<I18nProvider locale={locale}>
<Component {...pageProps} />
</I18nProvider>
</SSRProvider>
}

should we C) ?

// pages/_app.js

import { SSRProvider } from '@react-aria/ssr';

function MyApp({ Component, pageProps }) {
  return <SSRProvider theme={theme} >
<Component {...pageProps} />
</SSRProvider>
}



// pages/_document.js

import { I18nProvider, useLocale } from '@react-aria/i18n'; 

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
<I18nProvider locale={locale}>
      <Html lang={locale.lang} dir={locale.dir}>
        <Head>
          <meta charSet="utf-8" key="key-charset" />
          <title>{META.title}</title>
          <link rel="shortcut icon" href="/favicon.ico" key="key-favicon" />
          <Seo />
          </script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html >
    );
  }
}

🧢 Your Company/Team

We are kicking off a project with Next.js at Wide agency and we will most definitely be using some of the packages. Thank you all for any tips and guidance.
@LFDanLu
Copy link
Member

LFDanLu commented Oct 7, 2020

@polmoneys For my own information, are you using react-spectrum (the components) or react-aria (the aria hooks) in your project? SSRProvider has info on what you need for the former, while SSRProvider aria and i18n provider is if you are making your own components but utilizing our react-aria hooks.

@polmoneys
Copy link
Author

We are cherry picking react-aria, maybe if theming was more approachable we'd try react-spectrum components.

Muchas gracias 🙏🏾

@deadcoder0904 deadcoder0904 mentioned this issue Jan 29, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@polmoneys @LFDanLu