Scribd
Upload
4 views3 pages

3 - Routing and Navigation

The new App router in Next.js simplifies routing by using convention over configuration, allowing for better organization of related files. Dynamic routes can be created using parameters wrapped in square brackets, and shared UI layouts can be defined for multiple pages. Additionally, the Link component enhances navigation by prefetching links and utilizing client-side caching for improved performance.

Uploaded by

info.studypoint97
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

3 - Routing and Navigation

The new App router in Next.js simplifies routing by using convention over configuration, allowing for better organization of related files. Dynamic routes can be created using parameters wrapped in square brackets, and shared UI layouts can be defined for multiple pages. Additionally, the Link component enhances navigation by prefetching links and utilizing client-side caching for improved performance.

Uploaded by

info.studypoint97
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Routing and Navigation 1

Routing and Navigation


Terms
Client cache Prefetching
Dynamic routes
Layout

Summary
• The new App router in Next.js uses convention over con guration to de ne routes. It
looks for special les such as page.tsx, layout.tsx, loading.tsx, route.tsx, etc.

• With the App router, we can colocate our pages and their building blocks (eg
components, services, etc). This helps us better organize our projects as we can keep
highly related les next to each other. No need to dump all the components in a
centralized components directory.

• A dynamic route is one that takes one or more parameters. To add parameters to our
routes, we wrap directory names with square brackets (eg [id]).

• In standard React applications, we use the state hook for managing component state. In
server-rendered applications, however, we use query string parameters to keep state.
This also allows us to bookmark our pages in speci c state. For example, we can
bookmark a ltered and sorted list of products.

• We use layout les (layout.tsx) to create UI that is shared between multiple pages. The
root layout (/app/layout.tsx) de nes the common UI for all our pages. We can create
additional layouts for speci c areas of our application (eg /app/admin/layout.tsx).

Copyright 2023 Code with Mosh codewithmosh.com


fi
fi
fi
fi
fi
fi
fi
fi
fi
Routing and Navigation 2

• To provide smooth navigation between pages, the Link component prefetches the links
that are in the viewport.

• As the user moves around our application, Next.js stores the page content in a cache on
the client. So, if they revisit a page that already exists in the cache, Next.js simply grabs
it from the cache instead of making a new request to the server. The client cache exists
in the browser’s memory and lasts for an entire session. It gets reset when we do a full
refresh.

Copyright 2023 Code with Mosh codewithmosh.com


Routing and Navigation 3

File Conventions

Accessing Route and Query String Parameters

Programmatic Navigation

Copyright 2023 Code with Mosh codewithmosh.com

You might also like