next-i18next with next-rewrite does not work with root page rewrite path

Question

We have an existing app, where the root "/" gets redirected to "/search" by default. It's been working fine via our next-redirects.js file:

async function redirects() {
  return [
    {
      source: '/',
      destination: '/search',
      permanent: true,
    },
  ];
}

I have to implement translation to the app, using next-i18next, so that we can have translated text + routing out of the box with NextJS. I have followed the steps in the next-i8next docs. I added the next-i18next.config.js file as:

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
  },
  localePath: path.resolve('./public/static/locales'), // custom path file route
};

And the next.config looks like:

const { i18n } = require('./next-i18next.config');

const defaultConfig = {
  env: {
    SOME_ENV,
  },
  images: {
    deviceSizes: [980],
    domains: [
      'd1',
      'd2',
    ],
  },
  i18n,
  redirects: require('./next-redirects'),
  webpack: (config, options) => {
    if (!options.isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    if (
      NODE_ENV === 'production'
    ) {
      config.plugins.push(
        new SentryWebpackPlugin({
          include: '.next',
          ignore: ['node_modules'],
          urlPrefix: '~/_next',
          release: VERCEL_GITHUB_COMMIT_SHA,
        })
      );
    }

    return config;
  },
};

module.exports = withPlugins([withSourceMaps], defaultConfig);

We have a custom _app file getting wrapped with the appWithTranslation HOC, and it's setup with the getInitialProps, per nextJS docs:

function MyApp({ Component, pageProps }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentNode.removeChild(jssStyles);
    }

    TagManager.initialize(tagManagerArgs);

    setMounted(true);
  }, []);

  
  const Layout = Component.Layout || Page;

  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.png" type="image/ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <AppProviders>
        <Context {...pageProps}>
          <Layout {...pageProps}>
            <>
              <Component {...pageProps} />
              <Feedback />
              <PageLoader />
            </>
          </Layout>
        </Context>
      </AppProviders>
    </>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps({ ctx });
  }

  const cookies = Cookie.parse(ctx?.req?.headers?.cookie || '');
  if (Object.keys(cookies).length) {
    const { token } = JSON.parse(cookies?.user || '{}');

    let user = null;
    if (token) {
      const { data } = await get('api/users', { token });
      if (data) {
        user = data;
        user.token = token;
      }
    }

    pageProps.user = user;
    pageProps.cart = cookies?.cart;
    pageProps.defaultBilling = cookies?.defaultBilling;
    pageProps.reservationEstimateItem = cookies?.reservationEstimateItem;
    pageProps.reservationEstimate = cookies?.reservationEstimate;
  }

  return { pageProps };
};

export default appWithTranslation(MyApp);

And we have our _document file to handle some Emotion theming:

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const styles = extractCritical(initialProps.html);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style
            data-emotion-css={styles.ids.join(' ')}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: styles.css }}
          />
        </>
      ),
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
          <script
            type="text/javascript"
            src="https://js.stripe.com/v2/"
            async
          />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async ctx => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

At this point the redirect logic should continue to navigate to the search page which is setup like so:

export const SearchPage = () => {
  const router = useRouter();
  const { t } = useTranslation('search');
  

  return (
    <>
      <Head>
        <title>{`${t('searchTitle')}`}</title>
        <meta
          property="og:title"
          content={`${t('searchTitle')}`}
          key="title"
        />
        <meta
          name="description"
          content={t('metaDescription')}
        />
      </Head>
      <Search />
    </>
  );
};

SearchPage.namespace = 'SearchPage';

export const getStaticPaths = () => ({
  paths: [], // indicates that no page needs be created at build time
  fallback: 'blocking' // indicates the type of fallback
});
export const getStaticProps = async ({ locale }) => ({
  // exposes `_nextI18Next` as props which includes our namespaced files
  props: {
    ...await serverSideTranslations(locale, ['common', 'search']),
  }
});

export default SearchPage;

The search page has the getStaticPaths & getStaticProps functions, as needed on ALL page level files, per next-i18next.

Why does this setup no longer work with the redirect?

There are no errors in the terminal.
The network tab shows a 404 error on the root route of "/"

which implies the re-writing is not working. But what about the i18n makes this not behave?

Is it something in the _app or _document files?

If I navigate to /search directly, it loads fine, so the page routes are OK it seems.

Other notes:

NextJS "next": "^10.0.2",
next-i18next "next-i18next": "^7.0.1",

removed my answer....browserstack test fails with no redirections — Phil Lucks, Mar 19 '21 at 18:11

score 0 · Answer 1 · answered Mar 24 '21 at 17:12

There seems to be some possible issues with Next & Locales... https://github.com/vercel/next.js/issues/20488 https://github.com/vercel/next.js/issues/18349

My workaround is not pretty, but it works:

Delete the original next-rewrite
Add a new index.js page file that handles the redirect in the getServerSideProps:

const Index = () => null;

export async function getServerSideProps({ locale }) {
  return {
    redirect: {
      destination: `${locale !== 'en' ? `/${locale}` : ''}/search`,
      permanent: true,
    },
  };
}

export default Index;

next-i18next with next-rewrite does not work with root page rewrite path

1 Answers1