Hi @tacit seal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#jwt auth
subtle sunBOT
The error you're encountering is due to the fact that you're trying to import a server-only module in a client component. In Next.js, you can declare a component to be a client component by adding "use client" at the top of the file. However, once you've declared a component to be a client component, you cannot import server-only modules in that component.
In your case, it seems like the createSession or redirect function from your auth/login.ts file is a server-only module. You're trying to import this in a client component, hence the error.
To resolve this issue, you can consider the following options:
-
Move the server-only code to a server component or an API route. You can then fetch data from this API route in your client component.
-
If the server-only code is not essential for the initial render, you can dynamically import it in the client component using
next/dynamic. However, note that if you dynamically import a Server Component, only the Client Components that are children of the Server Component will be lazy-loaded - not the Server Component itself. Source (https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#importing-server-components) -
If the server-only code is a third-party package that uses client-only features like
useState,useEffect, andcreateContext, you can wrap it in your own Client Component. Source (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers)
Remember, the goal is to ensure that server-only code is not run in the client environment, and vice versa. This is a key principle in Next.js to ensure optimal performance and correct functionality.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
tacit seal
@subtle sun but i followed the docs. this is from docs: <form action={signup}>
app/actions/auth.tsx: export async function signup(formData: FormData) {}
subtle sunBOT
Let me check the knowledge base for you. One moment! :books:
The code you've provided seems to be following the pattern for using Server Actions in Next.js. Server Actions are functions that run on the server and can be used to handle form submissions, among other things.
In your case, you're using the signup function as a Server Action. This function is expected to handle the form data when the form is submitted.
However, the error you're encountering seems to be related to the use of server-only modules in a client component, not directly related to the form submission or the signup Server Action.
If you're following the Next.js documentation and still encountering issues, it might be due to a misunderstanding or a mistake in your code. It would be helpful to review the relevant sections of the Next.js documentation related to Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and Client and Server Components (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns).