I'm new to Next.JS and while learning its features I discovered that we are able to put our pages either into app/ or into pages/
I'm a little confused here as I've been told that it's better to use a new src/app/ folder instead of pages/ folder .
But, I learnt that server components where I use getInitialProps, getStaticProps with getStaticPaths etc. don't work in app/ router, they return undefined. I made a question about this case on Stack Overflow and got an answer that those data fetching methods can be used ONLY in pages/ folder. Moreover, in the getStaticProps, getServerSideProps tutorials, routes in examples are like pages/index.tsx
The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior. If your application uses the pages directory, please also see the Pages Router documentation.
So, as far as I understand, we can use app/ with pages/ together without any problems. Moreover, I tried to place different routes in both pages/ and app/ folder, and they work fine.
Despite my limited understanding, I want to find out if I got it right, or if there is anything I should avoid to build an app the right way.
[...] or there are any moments I should now to avoid and build project in a right way
In the tech industry there is never a "right" way to build anything. As you stated, yes, pages and app routers can be used together.
The most common scenario in which to use both the app router and the pages router together in the same project is when incrementally migrating from the old pages router to the new app router.
You can theoretically use both together when not migrating but it's not encouraged because they have different and incompatible APIs such as next/router and next/navigation which when used in the same project can cause unnecessary complexity. Furthermore, just because they work together does not mean they work well together. Navigating between a route from app to pages and vice versa causes hard navigation.
I've been told that it's better to use a new
src/app/folder instead ofpages/folder
Neither one is better than the other, they both have strengths and weaknesses. For example, "app router" requires more files and folders which can be overwhelming for large projects however, it supports React Server Components (RSC). In contrast, the pages router does not support RSC but each file and directory in pages/ is its own route segment resulting in a more concise folder structure.
Pick a router which works best for your app. Although "pages" will eventually be sunset, the Next.js steward Vercel has promised to maintain it going forward.
You probably want to use the app router, here's why:
React is going in a direction aligned with SSR frameworks like Next.js and Remix. This means that they are working more closely with framework authors to build new feature for React. The app router is the only way to use React 18.2+ features like RSC and server actions and since only the app router will receive new features it's the only way to use new React features. Unless you have very specific requirements, using the app router is the best choice long term.
From the Next.js data fetching docs
The Next.js App Router introduces a new, simplified data fetching system built on React and the Web platform. This page will go through the fundamental concepts and patterns to help you manage your data's lifecycle.
This means that getServerSideProps, getStaticProps, getStaticPaths and getInitialProps will not work in the app router. Instead, you should use RSC to fetch data with the fetch function (polyfilled by Next.js for caching) or directly fetch data from your data location (usually a database) within a RSC. Since RSC, unlike regular client-side components ("use client";), are executed on the server they can do everything getServerSideProps can.