Page.tsx as route definition in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the role of Page.tsx in Next.js App Router?

Page.tsx defines a route's UI and behavior. It is the main component rendered when visiting that route's URL.

beginner

How does Next.js determine the URL path for a Page.tsx file?

The file path inside the app/ folder maps directly to the URL path. For example, app/about/Page.tsx serves the /about route.

intermediate

Can Page.tsx export server components in Next.js 14+?

Yes. By default, Page.tsx is a React Server Component, meaning it runs on the server and sends HTML to the browser.

intermediate

What happens if you add a loading.tsx file alongside Page.tsx?

The loading.tsx component shows a loading state while the page is fetching data or loading asynchronously.

intermediate

How do you add metadata like page title or description in a Page.tsx route?

You create a metadata.ts file or export a metadata object from Page.tsx to define SEO tags and page info.

In Next.js App Router, what does Page.tsx represent?

A A route's main UI component

B A global layout for all pages

C A configuration file for routes

D A CSS stylesheet

Page.tsx defines the UI for a specific route URL.

Where should you place Page.tsx to create a route at /contact?

A app/contact/Page.tsx

B pages/contact.tsx

C app/Page.tsx

D components/contact/Page.tsx

In the App Router, folder structure inside app/ maps to routes.

What type of React component is Page.tsx by default in Next.js 14+?

A Client Component

B Higher-Order Component

C Class Component

D Server Component

Pages are server components by default for better performance.

Which file can you add to show a loading spinner while Page.tsx loads?

A Page.loading.tsx

B spinner.tsx

C loading.tsx

D loader.js

loading.tsx is the special file for loading states in a route folder.

How do you add SEO metadata for a route defined by Page.tsx?

A Add meta tags in <code>next.config.js</code>

B Export a <code>metadata</code> object or create <code>metadata.ts</code>

C Use a global <code>_document.tsx</code> file

D Add meta tags inside <code>Page.tsx</code> JSX

Next.js supports metadata exports or files per route for SEO.

Explain how Next.js uses Page.tsx files to define routes in the App Router.

Think about how folder names become URL parts and Page.tsx shows the page content.

Describe how to add a loading state and metadata to a route defined by Page.tsx.

Consider special files next to Page.tsx that control loading and SEO.