2023年5月にリリースされたNext.js 13.4からルーティングの処理が従来のPages RouterからApp Routerに切り替わり、どちらの機能を利用することも可能ですが、今後はApp Routerを利用することが推奨されています。
2つのルーティングの仕組みに関する特徴を理解するため、記事にしたいと思います。
以下はあくまで二つのルーティングの違いについて一部の要素に過ぎないので、私の理解が深まり次第随時追記していきたいと思っています。

Pages Router

ルーティングフォルダ構成

Pages Routerは、'pages'フォルダ配下に追加されたファイルやフォルダ名をもとに、ルーティングを定義します。

例えば、'pages/login.tsx'のようにファイルを追加すると、'/login'へのアクセス時に'login.tsx'ファイルの内容が表示されます。また、'pages/login/index.tsx'のようにすることもできます。

App Router

ルーティングフォルダ構成

App Routerは、'app'フォルダ配下にファイルやフォルダを追加することで、ルーティングが定義されます。

例えば、'/login'へのルーティングを作成する場合、'app/login/page.tsx'とする必要があります。
上記のように、フォルダ名でルートを指定し、'page.tsx'ファイルで内容を表示する仕様になっております。

また、App Routerを使用する際には共通のレイアウトを表示させる'app/layout.tsx'ファイルの作成が必須となります。

React Server Component(RSC)

App Routerで作成されるコンポーネントはすべて Server Component(サーバー側でレンダリング) として扱われます。Pages Routerでは全てClient Component(クライアント側でレンダリング)でした。App Router内でClient Component として扱うには、ファイルに 'use client' と記載する必要があります。"use client"と記載したファイル内にimportしたファイルは、全てClient Conponentとして解釈されます。以下の例の場合、Labelをimportしていますが、Labelファイル内に'use client'を記載していなくてもClient Componentになります。

"use client"
import Label from "./Label"
export default function Login() {
  return <Label>login</Label>;
}

Server Componentはリクエスト前にレンダリングをし、クライアントのJavaScriptのバンドルサイズを減らすことができるため、パフォーマンスが向上します。しかし、Server Componentはクライアント側で実行される React Hooks やイベントハンドラーが使えないなどのデメリットもあります。このような処理をするには Client Component として扱う必要があります。

Route Groups

ディレクトリ名を(フォルダ名)のようにして囲うと、そのフォルダがURLパスに含まれないようにすることができます。
例えばログイン済みユーザーのディレクトリは(app)、ゲストユーザーのディレクトリは(auth)のようにディレクトリを分けることで、それぞれのディレクトリ毎にレイアウトを分けることができます。