When trying to construct a URL in a Next.js Appwrite project, a "TypeError" may occur, but it works perfectly fine when the URL is provided directly

Question

When trying to construct a URL in a Next.js Appwrite project, a "TypeError" may occur, but it works perfectly fine when the URL is provided directly

I am currently following a tutorial on YouTube by JS Mastery about their HealthCare application using Next.js and Appwrite. I have obtained my API keys from the Appwrite cloud and added them to the .env.local file. However, upon running my project, I encounter the following error:

TypeError: Failed to construct 'URL': Invalid URL
    at Users.create (users.mjs:77:17)
    at createUser (patient.actions.ts:6:37)
    at onSubmit (PatientForm.tsx:43:42)
    at eval (index.esm.mjs:2256:23)

The code snippet for creating a user is as follows:

import { ID, Query } from "node-appwrite"
import { users } from "../appwrite.config"

export const createUser = async (user: CreateUserParams) => {
    try {
        const newUser = await users.create(
            ID.unique(), 
            user.email, 
            user.phone, 
            undefined, 
            user.name
        )
        console.log(newUser)

    } catch(error: any) {
        if (error && error?.code === 409) {
            const documents = await users.list([
                Query.equal('email', [user.email])
            ])

            return documents?.users[0]
        } else {
            console.log(error)
        }
    }
}

This segment of code exposes the user:

import * as sdk from "node-appwrite";

export const {
    NEXT_PUBLIC_ENDPOINT: ENDPOINT,
    PROJECT_ID,
    API_KEY,
    DATABASE_ID,
    PATIENT_COLLECTION_ID,
    DOCTOR_COLLECTION_ID,
    APPOINTMENT_COLLECTION_ID,
    NEXT_PUBLIC_BUCKET_ID: BUCKET_ID,
} = process.env;

const client = new sdk.Client();

client.setEndpoint(ENDPOINT!).setProject(PROJECT_ID!).setKey(API_KEY!);

export const databases = new sdk.Databases(client);
export const users = new sdk.Users(client);
export const messaging = new sdk.Messaging(client);
export const storage = new sdk.Storage(client);

Here are the contents of the .env.local file:

PROJECT_ID=************
API_KEY=************************************
DATABASE_ID=************
PATIENT_COLLECTION_ID=************
DOCTOR_COLLECTION_ID=************
APPOINTMENT_COLLECTION_ID=************
NEXT_PUBLIC_BUCKET_ID=************
NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1

I have verified that the API values are correct. To further confirm, I attempted substituting the variable names with the actual .env values and everything worked without issues.


client
    .setEndpoint("https://cloud.appwrite.io/v1")
    .setProject("***************")
    .setKey("*****************);

If you have any insights into what might be causing this issue or suggestions on how to resolve it, please do let me know. Any assistance would be greatly appreciated. Thank you.

Link to the YouTube video

typescript next.js appwrite

Answer 1

Answer №1

I spent a considerable amount of time trying to figure this out. Here's the key addition that helped me break through in patients.actions.ts:

"implement server logic"

Answer 2

I spent a considerable amount of time trying to figure this out. Here's the key addition that helped me break through in patients.actions.ts:

"implement server logic"

Answer 3

Answer №2

Make sure to include the statement "use server" at the top of your patients.actions.ts file. By adding this declaration, you are instructing Next.js to run all functions within this file on the server side only and not on the client side. Server-side code has access to all environment variables, even those that are not specifically prefixed with NEXT_PUBLIC_. This explains why your PROJECT_ID, API_KEY, and DATABASE_ID are now accessible.

 "use server"
    
    import { ID, Query } from "node-appwrite";
    import { users } from "../appwrite.config";

    export const createUser = async (user: CreateUserParams) => {
      try {
        const newuser = await users.create(
          ID.unique(),
          user.email,
          user.phone,
          undefined,
          user.name
        );
      } catch (error: any) {
        if (error && error?.code === 409) {
          const documents = await users.list([Query.equal("email", [user.email])]);
          return documents?.users[0];
        }
        console.error("An error occurred while creating a new user:", error);
      }
    };

Answer 4

Make sure to include the statement "use server" at the top of your patients.actions.ts file. By adding this declaration, you are instructing Next.js to run all functions within this file on the server side only and not on the client side. Server-side code has access to all environment variables, even those that are not specifically prefixed with NEXT_PUBLIC_. This explains why your PROJECT_ID, API_KEY, and DATABASE_ID are now accessible.

 "use server"
    
    import { ID, Query } from "node-appwrite";
    import { users } from "../appwrite.config";

    export const createUser = async (user: CreateUserParams) => {
      try {
        const newuser = await users.create(
          ID.unique(),
          user.email,
          user.phone,
          undefined,
          user.name
        );
      } catch (error: any) {
        if (error && error?.code === 409) {
          const documents = await users.list([Query.equal("email", [user.email])]);
          return documents?.users[0];
        }
        console.error("An error occurred while creating a new user:", error);
      }
    };

Answer 5

Answer №3

After experimenting, I found a solution that worked perfectly for me. Here is the updated configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        PROJECT_ID: process.env.PROJECT_ID,
        API_KEY:process.env.API_KEY,
        DATABASE_ID:process.env.DATABASE_ID,
        PATIENT_COLLECTION_ID:process.env.PATIENT_COLLECTION_ID,
        DOCTOR_COLLECTION_ID:process.env.DOCTOR_COLLECTION_ID,
        APPOINTMENT_COLLECTION_ID:process.env.APPOINTMENT_COLLECTION_ID,
        BUCKET_ID:process.env.BUCKET_ID,
        ENDPOINT:process.env.ENDPOINT
    }
};

export default nextConfig;

Answer 6

After experimenting, I found a solution that worked perfectly for me. Here is the updated configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        PROJECT_ID: process.env.PROJECT_ID,
        API_KEY:process.env.API_KEY,
        DATABASE_ID:process.env.DATABASE_ID,
        PATIENT_COLLECTION_ID:process.env.PATIENT_COLLECTION_ID,
        DOCTOR_COLLECTION_ID:process.env.DOCTOR_COLLECTION_ID,
        APPOINTMENT_COLLECTION_ID:process.env.APPOINTMENT_COLLECTION_ID,
        BUCKET_ID:process.env.BUCKET_ID,
        ENDPOINT:process.env.ENDPOINT
    }
};

export default nextConfig;

When trying to construct a URL in a Next.js Appwrite project, a "TypeError" may occur, but it works perfectly fine when the URL is provided directly

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to achieve the functionality of "redirecting to the previous dynamic route in history after a successful login" with Nextauth?

Choose the Angular 2 option

What are the reasons behind the code not functioning properly while utilizing 'vue-property-decorator' in Vue.js with TypeScript?

Experimenting with nested dual dynamic routing within the app's directory

I'm having trouble incorporating TypeScript into my React useState hooks. Can someone help me troubleshoot?

Reacting to the dynamic removal of spaces

The Type '{Property: string, Property2: string} does not match the type Observable<Filters[]>

Sharing Properties Across Angular Components using TypeScript

How to override or redefine a TypeScript class with generics

Capturing Input Data Dynamically with Angular Forms

Middleware for Redux in Typescript

Guide to deploying a Next.js static export using Nginx: Troubleshooting deep link issues

I am experiencing difficulties with the state updates, as they are not displaying my products correctly when I select them from

Guide to implementing the collapsible start and stop button feature in Angular

Tips for creating consistent spacing between elements using Tailwind CSS version 3

Exploring the Benefits of Implementing Google Authentication in the Development

Cross-origin error triggered by using an external API within a ReactJS application

Exploring the Functionality of Observables and HTTP Requests in Angular

Guide to Integrating BLK Theme into an Angular CLI Project

How can I populate dropdown options from an API in a react JS project using typescript and react saga?