Next.js import with variables or conditionally import

Question

import { keyFeatures } from 'common/data/AppClassic';

I am new to Next.js and using a template.

I have at least managed to succesfully add i18n, and I don't want to rebuild the whole template and the components... There is already a file in AppClassic that serves the content (pictures, text content ect). The easiest thing I thought of would be just duplicating this, and putting these files in different subpaths like 'en/common/data/AppClassic' or 'de/common/data/AppClassic' - And then somehow to import it with the dynamic locale const or conditionally render it, so if the locale const is 'en' then one file is imported, but if the const is 'de', then the other file is imported.

  const router = useRouter();
  const { locale } = router;
    import { keyFeatures } from { locale } + '/common/data/AppClassic';

Is there a way to do something like that, and if so, could you provide some examples - since I have actually no Idea what I am doing.

I would be very grateful.

Hadi Pawar · Accepted Answer · 2021-10-13 17:56:56Z

2

You could work your way with Next.js dynamic imports like the example:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

For more info check their official docs: https://nextjs.org/docs/advanced-features/dynamic-import

answered Oct 13, 2021 at 17:56

Hadi Pawar

1,1361 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

idmightasksomething Over a year ago

This doesn't work for me somehow, but a YouTube video that explained this, brought me to an idea that works for me. I can just import all 5 differently localized files, in each file rename the components according to the language. Then depending on the locale use the specific module to render the content. So still thank you :D

Collectives™ on Stack Overflow

Next.js import with variables or conditionally import

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related