There is only file-based routing within the /app folder.

Any path inside it that ends in a special routable file such as page.tsx or route.ts becomes routeable.

Middleware is a generic way to run code before any request.

Route handlers indicated by route.ts files in the file hierarchy expose public API endpoints that don't have to be in a dedicated /api folder but it's a common convention to do regardless.

so to fetch data from mongo, the example uses route.ts. Can I put the logic into page.tsx?

Using server components you can just fetch directly in pages or components that need the data.

what about /api folder

when you say

 expose public API endpoints

means i am connecting to the public apis and not creating a public api myself right?

(sorry for the dumb question)

Public API endpoints are only necessary for client-side fetching or 3rd parties trying to access your API. If you don't need this you can just have pages run DB queries directly and issue mutations using server actions.

If you haven't, I highly recommend going through the official Learn course: https://nextjs.org/learn

i went thru that

i'll go over it again

what about defining routes in config file

as in https://nextjs.org/docs/app/building-your-application/routing/redirecting#redirects-in-nextconfigjs

These are redirects.

You use them to prevent dead links.

It says this in the description:

This is useful when you change the URL structure of pages or have a list of redirects that are known ahead of time.

why would changing URL structure require redirect? in nextjs these are based on files right?

An actual example from our FAQ page:

    // Redirect old slugs to new shortened slugs
    {
      source: "/fetching-own-api-endpoint-in-getserversideprops-and-similar-functions",
      destination: "/fetch-api-in-getserversideprops",
      permanent: true,
    },

Without this, links on the Internet pointing to the old destination will yield a 404 and be broken.

Especially relevant when drastically changing paths such as this:

    {
      source: "/add-headers-and-status-to-response-in-route-handlers",
      destination:
        "https://nextjs.org/docs/app/building-your-application/routing/router-handlers#cors",
      permanent: true,
    },

Actually read the File Conventions docs if you haven’t, they’re great and you can definitely see in which use cases you’d use each.

Note: server actions aren’t included here but they’re basically a way to abstract away the logic of setting up a POST endpoint by just creating an async function (read server actions section in docs) and calling it somewhere in your code, especially client side code.

https://nextjs.org/docs/app/api-reference/file-conventions

will do

thanks both of you