Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong detection of getInitialProps on _app.tsx

See original GitHub issue

Hi everyone

seems that the lib detect getInitialProps on _app.js (or any other pages) with definition like below:

import { Provider } from 'react-redux' 
import store from '@store'

import type { AppProps } from 'next/app'
import '@styles/index.scss'

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp

with this definition model i get Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProps

and on the other pages than _app.js for example pages/index.tsx


import Head from 'next/head' 
import Link from 'next/link' 
interface Props {}

const Home: React.FC<Props> = () => {
   
  return (
    <div className="absolute inset-0 w-full h-full ">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      >
        change from {test}
      </button>
      <Link href="/test">
        <a>test</a>
      </Link>
    </div>
  )
}

export default Home

i get this warning:

[next-translate] In Next 10.x.x there is an issue related to i18n and getInitialProps. We recommend to replace getInitialProps to getServerSideProps on /index.tsx. Issue: https://github.com/vercel/next.js/issues/18396

UPDATE: When i remove those React.FC<Props> the errors gone!

UPDATE: With code below also i get the warning [next-translate] In Next 10.x.x there is an issue related to i18n and getInitialProps. We recommend to replace getInitialProps to getServerSideProps on /index.tsx. Issue: https://github.com/vercel/next.js/issues/18396

import Head from 'next/head';

const Home = () => {
  return (
    <div className="flex-1 w-full  ">
      <Head>
        <title>Test</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  );
};
Home.getLayout = (page: React.ReactNode) => {
  <div className="absolute flex flex-col inset-0">{page}</div>;
};

export default Home;

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:8 (4 by maintainers)

Top GitHub Comments

7reactions

Shariatycommented, Mar 30, 2021

I am getting this warning when getting a production built of my app:

Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProps

While, there is no getInitialProps whatsoever anywhere in my app, I found out that it happens as soon as I make use of nextTranslate in my next.config.js, Also, I can confirm that everything works fine but, it turns all my pages even those which are fully static into server side rendered !!!

NextJs Version: 10.0.9 next-translate Version: 1.0.4

5reactions

aralrocacommented, Sep 20, 2022

@aganjali @Divlo @Shariaty @BjoernRave @Axedyson @jahirfiquitiva @MrPumpking The idea of 2.0 version is to change the regular expressions in a better way. Currently, there are 2 proposals: with Babel parser and with TypeScript compiler.

We need feedback from the people to decide which one corrects more errors and does not generate new ones.

This bug should be fixed with the new version Can you test these two prereleases and give feedback?

With Babel: 2.0.0-experimental.1

With TypeScript compiler: 2.0.0-experimental.2

You can use this discussion to write your feedback:

https://github.com/aralroca/next-translate/discussions/881

Thank you so much!

Top Results From Across the Web

getInitialProps is not called unless _app.js extends next/app

First mistake in my case, looking at the 404.tsx file. I am importing withTranslation from next-i18next . This was done automatically by VSCode, ......

Why I Got Rid of getInitialProps in My Next.js Project

It renders a page on the server side Sometimes we need to render static pages with data from the server. getInitialProps is the...

getInitialProps never gets called...what am I doing wrong?

My issue was that I was using a custom App ( /pages/_app.js ) and it had a getInitialProps in it. It's a little...

Error Pages - Blitz.js

The default app/pages/_app.tsx configures an error boundary which catches errors that happen during render, on the client side. This will also catch errors ......

getInitialProps - Data Fetching - Next.js

Caveats · getInitialProps can not be used in children components, only in the default export of every page · If you are using...