Next.js Discord

Discord Forum

invalid hook call

Unanswered
Smew posted this in #help-forum
Open in Discord
SmewOP
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 <></>;
   }

35 Replies

SmewOP
i all time get invalid hook call
Jboncz
Can you provide the actual stack trace? @Smew
Its very hard to troubleshoot without an error.
SmewOP
@Jboncz here
Jboncz
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
SmewOP
im using NextSeo and if i remove it then it doesnt come the error @Jboncz
Jboncz
Okay, im not familiar with NextSeo. Let me take a look and see if I see anything
SmewOP
i use it basically for setting page title
Jboncz
Sounds like a complicated way to do it :))
SmewOP
in pages router it worked
Jboncz
Pages =/= app router 🙂
Using Next.js app directory introduced in Next.js 13?

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
SmewOP
can i set the title dynamically with metadata?
Jboncz
Yes, its javascript so of course you can
SmewOP
because metadata doesnt on client component
Jboncz
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
Next.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.

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
SmewOP
if i do it on layout and check for the route than it will mess up my code because its a big project
Jboncz
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.
SmewOP
thanks anyways brother..
American Crow
https://nextjs-faq.com/metadata-client-components
Jboncz
Ooo thats a pretty cool site!