Next.js 14 App Routerドキュメントを雑にまとめる

配下に影響があるか否かで使い分けかな。

これら全部予約語なのか！

URL Segment: Part of the URL path delimited by slashes.
URL Path: Part of the URL that comes after the domain (composed of segments).

これを理解しておかないと他人に的確に意図を伝えられなさそう。。

Good to know: The App Router takes priority over the Pages Router. Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict.

pages Router と共存できることを初めて知りました！

This is because while folders define routes, only the contents returned by page.js or route.js are publicly addressable.

page.js route.jsがない限り、ルーティングには影響しない

The App Router also provides a set of conventions to help you implement more advanced routing patterns. These include:

Parallel Routes: Allow you to simultaneously show two or more pages in the same view that can be navigated independently. You can use them for split views that have their own sub-navigation. E.g. Dashboards.
Intercepting Routes: Allow you to intercept a route and show it in the context of another route. You can use these when keeping the context for the current page is important. E.g. Seeing all tasks while editing one task or expanding a photo in a feed.
These patterns allow you to build richer and more complex UIs, democratizing features that were historically complex for small teams and individual developers to implement.

ここをもっと知りたいところ。

app 内に入れるのが主流なのかな。app外にcomponentsディレクトリを作成するのが主流なのか。

The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.

root layout にはbodyとhtmlタグが必要。

Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.

ここがよくわからないなー。

template.js これも予約語のようなもの。
layout.jsとの使い分けは、stateを保持するかどうか。

Templates are similar to layouts in that they wrap each child layout or page. Unlike layouts that persist across routes and maintain state,

The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation. If you'd like to disable this behavior, you can pass scroll={false} to the <Link> component, or scroll: false to router.push() or router.replace().

スクロールの復元機能がデフォルトtrue。

Recommendation: Use the <Link> component to navigate between routes unless you have a specific requirement for using useRouter.

基本的にはLinkを利用する。router.pushではなく。

Dynamic Routes: prefetch default to automatic. Only the shared layout down until the first loading.js file is prefetched and cached for 30s. This reduces the cost of fetching an entire dynamic route, and it means you can show an instant loading state for better visual feedback to users.

[id] パスの場合、動的な箇所以外をキャッシュ。loading.js まで。

Next.js, the App Router uses soft navigation. This means React only renders the segments that have changed while preserving React and browser state, and there is no full page reload.

ソフトナビゲーション

In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.
This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.

パスに影響を与えずに、整理できるのはメリット。
ただし、layout.jsはその都度作る必要がある。