0

I have a problem with routing in next.js. Project on the server is in subdirectory: exmaple.com/app.

Routing i want to achieve: example.com/app/<locale>/<pageName> (add prefix before url). When I'm trying to add it in href Link generates url this way: example.com/<locale>/app/<pageName>

Is there a way to add locale after prefix, not the other way around? When I use basePath it servers my app in example.com/app/app because project is in subdirectory /app

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

module.exports = {
    i18n,
    basePath: process.env.NODE_ENV !== 'production' ? '/app' : '',
    assetPrefix: '/app/',
};

Custom link component used to wrap links:

//link.tsx
import React from 'react';
import NextLink, { LinkProps } from 'next/link';
import { useRouter } from 'next/router';

export interface ILinkProps extends LinkProps {
    children: React.ReactChild;
    asLink?: boolean;
}

Link.defaultProps = {
    asLink: false,
};

export default function Link(props: ILinkProps): React.ReactElement {
    const { children, asLink, href, locale, ...rest } = props;

    const router = useRouter();

    const currentLocale = router.locale;

    return (
        <>
            {asLink ? (
                <NextLink
                    {...rest}
                    href={href}
                    locale={locale || currentLocale}
                    as={href}
                    passHref
                >
                    {children}
                </NextLink>
            ) : (
                children
            )}
        </>
    );
}
Dawid Mazewski
  • 141
  • 8
  • Adding the locale after the `basePath` should be the default behaviour. Can you show how you're setting up the `Link` in your code? – juliomalves Aug 24 '21 at 12:39
  • I did mistake in description: on the server because project is in subcategory I'm not using basepath. Basepath is used only on localhost. I will update description – Dawid Mazewski Aug 25 '21 at 07:26

0 Answers0