CODEWITHSUNDEEP
next.jsendpointappwrite.env
AlmondButter
AlmondButter

Reputation: 3

How to proceed with NextJS to fix endpoint undefined?

First approach to Next with Appwrite database. The project is hosted on Cloud and according to the documentation the endpoint is https://cloud.appwrite.io/v1 by default.

I created an .env.local file in the root folder and I have put the endpoint as NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1.

I deconstructed the environmental variables to call projecID and endpoint as per Appwrite documentation

import * as sdk from "node-appwrite";

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

const client = new sdk.Client();

client
  .setEndpoint(ENDPOINT) // Use the endpoint from the environment variable
  .setProject(PROJECT_ID) // Use the project ID from the environment variable
  .setKey(API_KEY); // Use the API key from the environment variable

when it comes to run the app, it keep crushing returning Error: NEXT_PUBLIC_ENDPOINT is not defined. Check your .env.local file.

The error comes from a check I wrote immediately after deconstructing the environmental variables.

if (!ENDPOINT) {
  throw new Error(
    "NEXT_PUBLIC_ENDPOINT is not defined. Check your .env.local file."
  );
}

I made sure the .env.local is in the right place, and it should be:

project-folder/
├── myapp/
│   ├── .env.local           
│   ├── app/
│   ├── components/
│   ├── node_modules/
│   ├── pages/
│   ├── public/
│   ├── styles/
│   ├── next.config.js
│   ├── package.json
│   └── ...
├── node_modules/
└── ...

I checked for typos and there are none.

Reinstalled Node although it was already updated to the latest version.

Update#2 @Devanand https://github.com/AnNvr/patient-management-app I thought the repository works better for all the code snippets

file structure as below:

patient-management-app/
├── app/
│   └── [Subfolders and files within the app directory]
├── components/
│   └── [Subfolders and files within the components directory]
├── lib/
│   └── [Subfolders and files within the lib directory]
├── public/
│   └── [Subfolders and files within the public directory]
├── types/
│   └── [Subfolders and files within the types directory]
├── .env.local
├── .eslintrc.json
├── .gitignore
├── README.md
├── components.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json

Upvotes: 0

Views: 66

Answers (1)

Devanand
Devanand

Reputation: 1

Have you try adding the env in next.config.mjs like below

.env.local
 
BACKEND_URL=http://localhost:5005

next.config.mjs
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    BACKEND_URL: process.env.BACKEND_URL, //add like this
  },
  optimizeFonts: true,
  reactStrictMode: true,
};

export default nextConfig;

for me it works sometimes and add the .env.local in the root path.

Upvotes: 0

Related Questions