not sure I understand your question, I organized my project like in pic. check here https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path and here https://nextjs.org/docs/app/building-your-application/routing/colocation#split-project-files-by-feature-or-route

instead app folder i want everything under src , also instead layout.js i want to use app.js or index.js. so how to make it work?

then just use src https://nextjs.org/docs/app/building-your-application/configuring/src-directory

but afaik you still need layout if you want stuff like menus or footer on all pages, otherwise just copy-paste them?

but documentation said to add layout.js into app folder under src folder.

i want to place layout.js into src folder only.. not into src/app folder

layout.js is same thing like core react app.js or index.js without pre-render

As far as I can tell the screenshot you initially provided uses the old pages router, while newer versions of NextJS use the app router. Using the pages router is still supported for backwards compatibility reasons, but generally you should just use the new app based structure.

I'm not an expert on this by any means, but as far as I know there is no way to define pages outside of the app folder when using the app router, like in the screenshot

so all the pages will be under app folder?

can we define those manually?

Actually now that I think about it, I'm pretty sure you can use both simultaneously (again, mostly for migration reasons, generally you should just use the app router if you can), which it seems they're doing in the screenshot. Unless you're currently migrating a pages project to the app structure I don't see a reason to do this though, as it would just add unnecessary bloat to your route structure

As far as I understand it yes, any routes should be defined under your app folder.

I'm not sure what you mean by this, what is it you want to define?

they have inbuilt config where the pages should be placed. i want to define my own config. so i have freedom to change the folder and files name.

module.exports = {
  mode: "development",
  entry: "./src/index.jsx", // main js
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },

see in my current react project I can define the entry page like this

so in next.js it is layout.js (index.js in react).

they have webpack inbuilt. I think there they placed all the config.

I don't think this is possible. I don't know their internal reasoning for this, but I can only assume it would cause issues due to their insistence on allowing backwards compatibility with the old pages router and allowing you to use both simultaneously. The reason you can't change the entry file is that the router uses reserved filenames to easily handle loading states, errors, etc.

More info on these naming conventions here: https://nextjs.org/docs/app/building-your-application/routing#file-conventions

The router abstracts React functions like Suspense and Error Boundaries so you can use them through just file conventions

Even though you can't change the app directory itself, there are also still different ways of structuring your project inside it, so there might still be structuring options available to you that click fit your preference https://nextjs.org/docs/app/building-your-application/routing/colocation

they said i have freedom to organize project. i place layout.js into src folder and it doesnt work..

This screenshot is using an older version of NextJS where the pages router was still in use. Currently, the app router is standard. This only looks within your app directory.

There is not much difference other than one extra layer of nesting

here,,

i want layout file like this

I don't think this is currently possible.

However, simply renaming your src folder to app, and then renaming your app folder to something else would already do the trick in this case

but then you'd want to move your assets outside of the folder

very restrictive . need to see oter SSR instead next.

Thank you for you time and helps.. ❤️

No worries! Hope you're able to find something that aligns better with your preferences