Hi there,

Some of my pages contains various hooks such as useState. All those pages are using 'user client'; which disables functionalities like exporting the metadata for the page title etc. etc. What is the go to approach to handle there situations?

I've came up with the following ideas:

1. Having a layout.tsx file next to each page.tsx file what has a 'use client';.

import { Metadata } from 'next';
import { FunctionComponent, ReactNode } from 'react';

export const metadata: Metadata = {
  title: 'Login',
};

const Layout: FunctionComponent<{ readonly children?: ReactNode }> = ({ children }) => children;

export default Layout;

2. Moving all states/components of a page to its own file, for example app/login/page.tsx imports a containers/pages/login.tsx which uses 'use client';

or are there better/other approaches to this issue?