You can not use getStaticProps or getStaticPaths with getServerSideProps. To use SSG, please remove getServerSideProps

[lertsoft]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

npm. 8.5.5
next: 10.x ,

What browser are you using? (if relevant)

Safari & Brave

How are you deploying your application? (if relevant)

N/A

Describe the Bug

The bug seems to be that the function server-side translations is in conflict with another function called getServerSideProps, and there is a conflict because I cannot have two server functions in one file.

Expected Behavior

You must provide a clear and concise description of what you expected to happen.
The website would render and show the interface to change the language of the site.

To Reproduce

import getLatestRepos from "@lib/getLatestRepos";
import userData from "@constants/data";
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'footer']),
  },
})
export default function Home({ repositories }) {
  return (
    <ContainerBlock
      title="Developer, Photographer, Filmmaker, Creator"
      description="This is a website build to learn more of the tailwind css and next.js" >
      <Hero />
      <FavouriteProjects />
      <LatestCode repositories={repositories} />
    </ContainerBlock>
  );
}
export const getServerSideProps = async () => {
  console.log(process.env.GITHUB_AUTH_TOKEN);
  let token = process.env.GITHUB_AUTH_TOKEN;

  const repositories = await getLatestRepos(userData, token);
  // console.log("REPOSITORIES", repositories);

  return {
    props: {
      repositories,
    },
  };
};
```

[advaiyalad]

@lertsoft You cannot use getStaticProps and getServerSideProps on the same page. Since you likely want to server-side render the page (it is fetching some github data that you probably want to be updated every so often), merge the translations code into the serverSideTranslations like this:

import getLatestRepos from "@lib/getLatestRepos";
import userData from "@constants/data";
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export default function Home({ repositories }) {
  return (
    <ContainerBlock
      title="Developer, Photographer, Filmmaker, Creator"
      description="This is a website build to learn more of the tailwind css and next.js" >
      <Hero />
      <FavouriteProjects />
      <LatestCode repositories={repositories} />
    </ContainerBlock>
  );
}
export const getServerSideProps = async ({ locale }) => {
  console.log(process.env.GITHUB_AUTH_TOKEN);
  let token = process.env.GITHUB_AUTH_TOKEN;

  const repositories = await getLatestRepos(userData, token);
  // console.log("REPOSITORIES", repositories);

  return {
    props: {
      repositories,
       ...await serverSideTranslations(locale, ['common', 'footer']),
    },
  };
};

This will do the translations on every request, so this may not be the exact behavior you want, however.

[lertsoft]

Thank you for your help with those functions!
I just implemented it and now I am getting this error... I don't know if you might have a clue of why this is happening.





The code in the in the image above is the from the file that the log error was throwing at me, I tried some changes that I saw on other repos and stack overflow but nothing worked at the time.
Will continue trying and if I figure it out I will post it.

Again thanks

[lertsoft]

I am going to close this disccusion as I found my culprit for the error.
As I was trying to find solutions I had put these code on my next.config.js file, also had I had a component that was getting information from a remote server and every time that the server fetched data it would create a conflict with the translation as that was constant.

webpackFinal: async (config, { configType }) => { // config.resolve.fallback = { // ...config.resolve.fallback, // fs: false, // <------ // path: false // <----- // }; // return config; // },

TLDR;

1. Do not create conflicts between const and dynamic components
2. Check your next.config.js file
3. Check for typos... I had many.

[dzek69]

Sorry for bumping and potentially spamming with notification, but I just wanted to leave a helpful comment for people googling the issue:

Rarely with next.js in dev mode when you rename/move your files something goes wrong with some cache [?] and this error message appear for no reason, in a route that clearly not uses any of getStaticProps, getStaticPaths or getServerSideProps. In this case just restart your next.js dev server.