#Metadata and "use client"

1 messages · Page 1 of 1 (latest)

dusky merlin
#

Is it possible to resolve this? Seems I can only have "use client" or metadata, but not together, otherwise it will result in an error. I need to have "use client" for formspree

`"use client";

import type { Metadata } from "next";
import Footer from "@/components/Footer";
import Page from "@/components/Page";
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

const h1 = "Hello.";

// export const metadata: Metadata = {
// title: "Services",
// description: "Services I offer as a UI/UX Designer and Front-End Developer.",
// };`

jagged veldtBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

jagged gulch
#

You can’t use both at the same time, the metadata API is a Server Only feature. In order to use it you need to remove the “use client” from the file.

My recommendation is:
1- keep your pages and layout always on the Server (never put “use client” at the top) this way you can make use of the cool features of the Server environment like fetching data, using metadata APIs and more.
2- to make use of Client Only features then I would suggest moving that component to a separate file where you mark it with “use client” and export from it either the whole page content or individual granular client components.

dusky merlin
jagged gulch
#

You can opt for whatever folder structure you want, I try to keep components that are only gonna be used in a single page, as close to the page itself as possible.

Example:
app/contact/page.tsx
app/contact/my-form.tsx

Or even:
app/contact/page.client.tsx, and have all client components together exported from this file