How to run nextjs dev server with the config from another project?

Question

I develop a nextjs application. Inside the root folder, I've made landing/pages/ folder and I want to run dev server with those pages using next dev ./landing. The point is to create a separate app using the same codebase, configs, etc.

Dev server runs properly, but most features don't work:

• .env is not read from the root folder (the workaround is to use cp .env ./landing && next dev ./landing). but it's an ugly way to solve it
• assets are read from public folder inside the /landing. But I'd like to use the public folder from the root.
• I can't use components from folders that are "above" /landing folder in the project structure. The compiler throws an error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Is there any custom configuration to solve the problem? Maybe there is another way to have something like two "pages" folders in which there is the same source code, but thanks to it I could build two separate apps?

I've pushed my current code to the following repository: https://github.com/michalgrzasko/nextjs-2-pages-example

Just run dev server using yarn dev. To reproduce errors:

• Uncomment process.env.NEXT_PUBLIC_APP_BASE_URL in landing/pages/index.tsx
• Uncomment <Nav /> component in the same file

Answer 1

.env is not runnable files, if you will load from "somewhere" - you don't need it. You should focus on the next.config.js file. Check this, maybe will help.

Anyway, you will need:

-API from your second source(from where you like to load config)

-Load config every time once you dev build your project.

-use process.env.your_name in your classes/functions