#invalid hook call

36 messages · Page 1 of 1 (latest)

sudden moss
# 
const SignIn = () => {
  const router = useRouter();
  const { status } = useSession();

  const [hasError, setError] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  useEffect(() => {
    if (status === "authenticated") {
      router.push("/backend");
    }
  }, [router, status]);

  if (status === "authenticated") {
    return <></>;
   }
gusty swallowBOT
#
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)

sudden moss
#

i all time get invalid hook call

ornate ruin
#

Can you provide the actual stack trace? @sudden moss

#

Its very hard to troubleshoot without an error.

sudden moss
#

@ornate ruin here

ornate ruin
#

Can you provide the entirety of the function? Seems some miht be cut off? If thats it, your missing a }

#

Preferably the entire page if possible.

#

Your error is somewhere that 'useContext' is being called

#

im assuming useSession is a custom context

sudden moss
#

im using NextSeo and if i remove it then it doesnt come the error @ornate ruin

ornate ruin
#

Okay, im not familiar with NextSeo. Let me take a look and see if I see anything

sudden moss
#

i use it basically for setting page title

ornate ruin
#

Sounds like a complicated way to do it :))

sudden moss
#

in pages router it worked

ornate ruin
#

Pages =/= app router 🙂

# 

If you are using the Next.js app directory, then it is highly recommended that you use the built-in generateMetaData method. You can check out the docs here

If you are using the pages directory, then NextSeo is exactly what you need for your SEO needs!```
#

Even the package advises not to use it with app dir

sudden moss
#

can i set the title dynamically with metadata?

ornate ruin
#

Yes, its javascript so of course you can

sudden moss
#

because metadata doesnt on client component

ornate ruin
# 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}

every page or layout you can set it here, you can use the layout.tsx to dynamically set it based on router path.

#

I would do it on layout.

#

Pass the route using a provider context to the layout, then generate the title based on the path

#

Depends what you are trying to accomplish

# 

There are two ways you can add metadata to your application:

Config-based Metadata: Export a static metadata object or a dynamic generateMetadata function in a layout.js or page.js file.
File-based Metadata: Add static or dynamically generated special files to route segments.
With both these options, Next.js will automatically generate the relevant <head> elements for your pages. You can also create dynamic OG images using the ImageResponse constructor.
#

Heres a good example on the nextjs docs

import { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function

sudden moss
#

if i do it on layout and check for the route than it will mess up my code because its a big project

ornate ruin
#

Okay, I would wait for some additional help then. Im not familiar enough nor do I have time to spin up a project to try to replicate the issue. Sorry, general rule of thumb is if the package creator says not to use it under X circumstances I probably wouldnt use it. They know how the package works more than anyone.

#

Sorry I couldnt be more help.

sudden moss
#

thanks anyways brother..

sharp lantern