Reading React Essentialsfor Nextjs 13.

• Server components cant be imported into a client components. However if client components exposes a “hole” for a react node e.g with children or a custom prop, a server component can be passed through here. This means something like this is possible `

<RootServerComponent>
   <ClientComponent>
     <ChildServerComponent />
   </ClientComponent>
</RootServerComponent>

• If server environment key which is not prefixed is leaked to client Next.js will covert this to an empty string
  • to prevent this there is the server-only package which can be installed with npm install server-only and imported in like so:

import 'server-only';

• Context will work, but will require to probably wrap all third party providers in a use client component eg:

'use client'; import { ThemeProvider } from 'acme-theme';
import { AuthProvider } from 'acme-auth'; 

export function Providers({ children }) { 
  return ( 
  <ThemeProvider> 
    <AuthProvider>{children}</AuthProvider> 
  </ThemeProvider> );
  }

Next js Framework Environment Variables