Use Dripsy with Next.js

Once you've already completed the installation steps for dripsy & wrapped your app with DripsyProvider, you can do the final simple steps to get it ready for your Next.js app.

Recommendation: use the monorepo starter

I recommend using Expo's Next.js integration. The best way to do so is with a monorepo.

If you can, use the monorepo starter. It will make your life a lot easier.

Next.js 11 works best with React Native if it has separate entrypoints, so a monorepo makes this work.

Also, both Expo and Vercel support monorepos.

Alternate: install yourself

1. Install dependencies

yarn add -D next-compose-plugins next-transpile-modules @expo/next-adapter

2. Edit your next.config.js file to look something like this:

const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
'dripsy',
'@dripsy/core',
// you can add other packages here that need transpiling
])
const { withExpo } = require('@expo/next-adapter')
module.exports = withPlugins(
[withTM],
withExpo({
projectRoot: __dirname,
})
)

3. Set ssr={true} on DripsyProvider

// pages/_app.js
export default function App({ pageProps, Component }) {
return (
<>
<DripsyProvider
ssr
ssrPlaceholder={<LoadingScreen />} // optional
theme={theme}
>
<Component {...pageProps} />
</DripsyProvider>
</>
)
}

What does ssr: true do, exactly? All it does is return null until your app is mounted (on web). This is because Dripsy uses the Dimensions API from react-native, which isn't compatible with server-side rendering.

If your app already returns null on the first render, then you don't need to set ssr: true. For instance, using react-native-safe-area-context's SafeAreaProvider already does this for you.

SEO

If you're curious how you can still leverage Next.js's great static generation feature for SEO with dynamic meta tags, check out the SEO Recommendations.


That's it! Btw, if you're using Expo + Next.js, check out my library, expo-next-react-navigation to help with navigation.