Providing a conditional getServerSideProps function

Is there a way to dynamically activate or deactivate the getServerSideProps function using an environment variable? I attempted the following approach:

  if (process.env.NEXT_PUBLIC_ONOFF === 'true') {
        export const getServerSideProps: GetStaticProps = async context => {
            const { locale = 'en' } = context;
    
            return {
                props: {
                    ...(await serverSideTranslations(locale, [
                        'common',
                    ]))
                }
            };
        };
    }

Unfortunately, I encountered a TypeScript error stating

Modifiers cannot appear here.ts(1184)
. How can I effectively enable or disable serversideprops based on the value of my environment variable?

Answer №1

Here's a code snippet that may help:

let conditionalGetServerSideProps: GetServerSideProps | undefined

if (process.env.NEXT_PUBLIC_FLAG === 'true') {
    conditionalGetServerSideProps = async () => {
        // ...
    }
} else {
    conditionalGetServerSideProps = undefined
}

export const getServerSideProps = conditionalGetServerSideProps

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Currently facing an issue with TypeScript and types. I have an array of IDs obtained from checkboxes, which may also be empty. An example of values returned from the submit() function: const responseFromSubmit = { 1: { id: "1", value: "true" }, 2: ...

Setting up NextJS on Dokku for a Production Environment

I have successfully installed Dokku and am ready to deploy my basic NextJs application on it. However, I am facing an issue where the application is running in development mode instead of production mode. When I check the value of the NODE_ENV variable in ...

How can I make the snackbar open multiple times in a row?

Check out this codesandbox I created to show an issue. When you click the button, a MUI snackbar opens. However, if you close it and try to reopen it, nothing happens. Do you think the problem is related to how I'm using hooks? Explore the sandbox h ...

Reloading issue with NextJs when utilizing next-i18next for translations on a specific

Having trouble with next-i18next in my app. Implemented everything correctly, but the layout keeps rerendering on pages with getStaticProps. Need to find a way to prevent this. Created a file named withStaticTranslations.ts for pages, but when trying to l ...

Prevent redirection when submitting and show an error message instead

I implemented a login system where, upon entering the correct username and password, a token is stored in local storage. If there's an error with the credentials, an "Login Unsuccessful" message is displayed. Everything was functioning correctly until ...

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design toke ...

Troubleshooting: Next.js - Issues with encodeURIComponent function when using `/` in getStaticPaths

Reproducible site showcasing the issue: Reproducible code example: https://github.com/saadq/nextjs-encoding-issue Homepage Food page The goal is to dynamically create static pages for different food items based on their titles. This functionality works ...

Checking to see if a string meets the criteria of being a valid ARGB value

How do I verify that a string represents a valid ARGB value, such as #ffffffff for ARGB 255,255,255,255? Is there a way to validate this using TypeScript and C#? ...

Implementing a Toggle Feature in React Components for Looping Elements

Hey everyone, I'm encountering a problem on my development site and could use some assistance. The issue I'm facing involves looping through a data file to create project cards with show more/show less functionality for displaying/hiding descript ...

Assign a property to an array of objects depending on the presence of a value in a separate array

Looking to manipulate arrays? Here's a task for you: const arrayToCheck = ['a', 'b', 'c', 'd']; We have the main array as follows: const mainArray = [ {name:'alex', code: 'c'}, ...

Tips for setting up a proxy with an enum

I am facing an issue with setting up a Proxy for an enum. Specifically, I have an enum where I want to assign a value to this.status using a Proxy. However, despite my expectations, the output "I have been set" does not appear in the console. Can anyone ex ...

Issues with unresponsive buttons in AngularJs

In creating a basic registration page, I encountered a strange issue with the button functionality. Whenever I attempt to submit the form, an error should be logged to the console. However, the buttons on the registration page appear to be inactive - it se ...

Strategies for improving the performance of a CRON Job running on Vercel that is experiencing a 504: GATEWAY_TIMEOUT error as a result of a serverless function surpassing the 10-second timeout

My CRON Job on Vercel keeps giving me a 504: GATEWAY_TIMEOUT error whenever I attempt to run it. After checking the logs of my Cron Job function on Vercel, everything appears to be in order. So, I delved into some research on the meaning of a 504 status co ...

``I would like to discuss the use of TypeScript in returning a boolean value from

I am new to Angular and Typescript, and I need help returning a boolean value from a function that I can use in *ngIf. I want this process to be seamless. Can someone assist me with this? canView = false; getView() { this.permissionService.getPermissi ...

Unlocking access with Firebase and Next 13

I'm currently working on implementing a basic authorization control system, where the "admin" user has access to all pages, while the "manager" user is restricted to only the home page and proposals page. Despite my efforts over the past week, I find ...

Failed to execute start script 'ng serve' in npm start

Let me make it clear: I'm brand new to AngularJS and pretty much any Web Technology. I consider myself a novice in the realm of Web Development. I attempted to install AngularJS, and truth be told, after numerous "Mysterious Button Clicks", I might ...

Having trouble implementing object type switching in Typescript

While in the process of developing an angular application, I stumbled upon a peculiar issue. Some time ago, I crafted this piece of code which performed flawlessly: selectedGeoArea: any receiveStoreEvent(event) { switch (event.constructor) { ca ...

Fetching Unicode block specials using axios in getStaticProps with Next.js

Click here to view the code and data results My attempt using the fetch method was successful, but I encountered issues when trying to use 'axios' ...

Error encountered: NextJs Docker container unable to run due to permissions issue (sh: next: Permission denied

I have encountered an issue while attempting to run a docker compose file on my ubuntu server that contains a nextjs 13 application. When I execute docker-compose up -d, the following error arises: => ERROR [builder 4/4] RUN npm run build ...

how to forward visitors from one URL to another in a Next.js application

I have an existing application that was initially deployed on , but now I want to change the domain to https://example.com. What is the best way to set up redirection for this domain change? I have attempted the following methods: async redirects() { r ...