Docs: Getting Started Nits

docs/01-app/01-getting-started/01-installation.mdx

@@ -1,7 +1,7 @@
 ---
-title: How to set up a Next.js project
+title: How to set up a new Next.js project
 nav_title: Installation
-description: Learn how to create a new Next.js application with `create-next-app`, and set up TypeScript, ESLint, and Module Path Aliases.
+description: Create a new Next.js application with the `create-next-app` CLI, and set up TypeScript, ESLint, and Module Path Aliases.
 ---
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
@@ -214,10 +214,6 @@ You can optionally create a [`public` folder](/docs/app/building-your-applicatio
 
 Next.js comes with built-in TypeScript support. To add TypeScript to your project, rename a file to `.ts` / `.tsx`. Run `next dev`, Next.js will automatically install the necessary dependencies and add a `tsconfig.json` file with the recommended config options.
 
-> **Good to know**:
->
-> - If you already have a `jsconfig.json` file, copy the `paths` compiler option from the old `jsconfig.json` into the new `tsconfig.json` file, and delete the old `jsconfig.json` file.
-
 <AppOnly>
 
 ### IDE Plugin

docs/01-app/01-getting-started/03-project-structure.mdx → docs/01-app/01-getting-started/02-project-structure.mdx

@@ -1,7 +1,7 @@
 ---
-title: Project Structure and Organization
+title: Project structure and organization
 nav_title: Project Structure
-description: Learn about the folder and file conventions in a Next.js project, and how to organize your project.
+description: An overview of the folder and file conventions in Next.js, and how to organize your project.
 ---
 
 This page provides an overview of the folder and file conventions in Next.js, as well as tips for organizing your project.

docs/01-app/01-getting-started/02-layouts-and-pages.mdx → docs/01-app/01-getting-started/03-layouts-and-pages.mdx

@@ -1,8 +1,10 @@
 ---
 title: How to create layouts and pages
 nav_title: Layouts and Pages
-description: Learn how to create layouts and pages in your Next.js application, and link between them.
+description: Create your first pages and layouts, and link between them.
 related:
+  title: API Reference
+  description: Learn more about the features mentioned in this page by reading the API Reference.
   links:
     - app/api-reference/file-conventions/layout
     - app/api-reference/file-conventions/page
@@ -168,7 +170,7 @@ export default function Page() {
 }
 ```
 
-> **Good to know**: Wrapping a folder name in square brackets (e.g. `[slug]`) creates a special **dynamic route segment** used to generate multiple pages from data. This is useful for blog posts, product pages, etc. Learn more about [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes).
+> **Good to know**: Wrapping a folder name in square brackets (e.g. `[slug]`) creates a special [dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes) used to generate multiple pages from data. This is useful for blog posts, product pages, etc.
 
 ## Nesting layouts
 
@@ -208,7 +210,7 @@ You can use the [`<Link>` component](/docs/app/api-reference/components/link) to
 
 For example, to generate a list of blog posts, import `<Link>` from `next/link` and pass a `href` prop to the component:
 
-```tsx filename="app/ui/post.tsx" highlight={1,6} switcher
+```tsx filename="app/ui/post.tsx" highlight={1,10} switcher
 import Link from 'next/link'
 
 export default async function Post({ post }) {
@@ -226,7 +228,7 @@ export default async function Post({ post }) {
 }
 ```
 
-```jsx filename="app/ui/post.js" highlight={1,6}  switcher
+```jsx filename="app/ui/post.js" highlight={1,10}  switcher
 import Link from 'next/link'
 
 export default async function Post({ post }) {

docs/01-app/01-getting-started/04-images-and-fonts.mdx

@@ -1,14 +1,16 @@
 ---
 title: How to optimize images and fonts
 nav_title: Images and Fonts
-description: Learn how to optimize images and fonts with Next.js
+description: Learn how to optimize images and fonts.
 related:
+  title: API Reference
+  description: Learn more about the features mentioned in this page by reading the API Reference.
   links:
     - app/api-reference/components/font
     - app/api-reference/components/image
 ---
 
-Next.js comes with automatic image and font optimizations for better performance and user experience. This page will guide you through how to start using them.
+Next.js comes with automatic image and font optimization for better performance and user experience. This page will guide you through how to start using them.
 
 ## Handling static assets
 
@@ -27,7 +29,7 @@ You can store static files, like images and fonts, under a folder called `public
 The Next.js [`<Image>`](/docs/app/building-your-application/optimizing/images) component extends the HTML `<img>` element to provide:
 
 - **Size optimization:** Automatically serving correctly sized images for each device, using modern image formats like WebP and AVIF.
-- **Visual stability:** Preventing [layout shift](/learn/seo/web-performance/cls) automatically when images are loading.
+- **Visual stability:** Preventing [layout shift](https://web.dev/articles/cls) automatically when images are loading.
 - **Faster page loads:** Only loading images when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
 - **Asset flexibility:** Resizing images on-demand, even images stored on remote servers.
 
@@ -91,7 +93,7 @@ export default function Page() {
 }
 ```
 
-Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width) and [`height`](/docs/app/api-reference/components/image#height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://nextjs.org/learn/seo/web-performance/cls) while your image is loading.
+Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width) and [`height`](/docs/app/api-reference/components/image#height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.
 
 ### Remote images
 
@@ -127,9 +129,9 @@ export default function Page() {
 }
 ```
 
-Since Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/app/api-reference/components/image#width), [`height`](/docs/app/api-reference/components/image#height) and optional [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) props manually. The `width` and `height` attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. But `width` and `height` do _not_ determine the rendered size of the image file.
+Since Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/app/api-reference/components/image#width), [`height`](/docs/app/api-reference/components/image#height) and optional [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) props manually. The `width` and `height` attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in.
 
-Then, to safely allow images from remote servers, you need to define a list of supported URL patterns in `next.config.js`. Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:
+Then, to safely allow images from remote servers, you need to define a list of supported URL patterns in [`next.config.js`](/docs/app/api-reference/config/next-config-js). Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:
 
 ```ts filename="next.config.ts" switcher
 import { NextConfig } from 'next'
@@ -167,17 +169,15 @@ module.exports = {
 }
 ```
 
-Learn more about Image Optimization in the [API Reference](/docs/app/api-reference/components/image).
-
 ## Optimizing fonts
 
 The [`next/font`](/docs/app/api-reference/components/font) module automatically optimizes your fonts and removes external network requests for improved privacy and performance.
 
 It includes **built-in automatic self-hosting** for _any_ font file. This means you can optimally load web fonts with no layout shift.
 
-To start using `next/font`, import it from `next/font/local` or `next/font/google` (depending on whether you're using a [Google](#google-fonts) or [local](#local-fonts) font), call it as a function with the appropriate options, and set the `className` of the element you want to apply the font to.
+To start using `next/font`, import it from [`next/font/local`](#local-fonts) or [`next/font/google`](#google-fonts), call it as a function with the appropriate options, and set the `className` of the element you want to apply the font to. For example:
 
-```tsx filename="app/layout.tsx" switcher
+```tsx filename="app/layout.tsx" highlight={1,3-5,9} switcher
 import { Geist } from 'next/font/google'
 
 const geist = Geist({
@@ -193,7 +193,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 }
 ```
 
-```jsx filename="app/layout.js" switcher
+```jsx filename="app/layout.js" highlight={1,3-5,9} switcher
 import { Geist } from 'next/font/google'
 
 const geist = Geist({
@@ -211,14 +211,14 @@ export default function Layout({ children }) {
 
 ### Google fonts
 
-You can automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. **No requests are sent to Google by the browser.**
+You can automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment, meaning no requests are sent to Google by the browser when the user visits your site.
 
-To start using a Google Font, import it from `next/font/google` as a function.
+To start using a Google Font, import your chosen font from `next/font/google`:
 
 ```tsx filename="app/layout.tsx" switcher
-import { Inter } from 'next/font/google'
+import { Geist } from 'next/font/google'
 
-const inter = Inter({
+const geist = Geist({
   subsets: ['latin'],
 })
 
@@ -228,23 +228,23 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={geist.className}>
       <body>{children}</body>
     </html>
   )
 }
 ```
 
 ```jsx filename="app/layout.js" switcher
-import { Inter } from 'next/font/google'
+import { Geist } from 'next/font/google'
 
-const inter = Inter({
+const geist = Geist({
   subsets: ['latin'],
 })
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={geist.className}>
       <body>{children}</body>
     </html>
   )
@@ -274,7 +274,7 @@ export default function RootLayout({
 }
 ```
 
-```jsx filename="app/layout.js" switcher
+```jsx filename="app/layout.js" highlight={1,3-5,9} switcher
 import { Roboto } from 'next/font/google'
 
 const roboto = Roboto({
@@ -293,7 +293,7 @@ export default function RootLayout({ children }) {
 
 ### Local fonts
 
-To use a local font, import `next/font/local` and specify the `src` of your local font file in the [`public` folder](#handling-static-assets).
+To use a local font, import your font from `next/font/local` and specify the `src` of your local font file in the [`public` folder](#handling-static-assets).
 
 ```tsx filename="app/layout.tsx" switcher
 import localFont from 'next/font/local'
@@ -359,5 +359,3 @@ const roboto = localFont({
   ],
 })
 ```
-
-Learn more about Font Optimization in the [API Reference](/docs/app/api-reference/components/font).

docs/01-app/01-getting-started/05-css-and-styling.mdx

@@ -1,8 +1,10 @@
 ---
 title: How to use CSS in your application
 nav_title: CSS and Styling
-description: Learn how to add CSS and styling to your Next.js application.
+description: Learn about the different ways to add CSS to your application, including CSS Modules, Global CSS, Tailwind CSS, and more.
 related:
+  title: API Reference
+  description: Learn more about the features mentioned in this page by reading the API Reference.
   links:
     - app/api-reference/config/next-config-js/sassOptions
     - architecture/nextjs-compiler
@@ -47,12 +49,6 @@ export default function Page({ children }) {
 }
 ```
 
-> **Good to know:**
->
-> - CSS Modules are only enabled for files with the `.module.css` and `.module.sass` extensions.
-> - In production, all CSS Module files will be automatically concatenated into minified and code-split `.css` files.
-> - These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
-
 ## Global CSS
 
 You can use global CSS to apply styles across your application.
@@ -118,13 +114,12 @@ npx tailwindcss init -p
 
 Inside your Tailwind configuration file, add paths to the files that will use the Tailwind class names:
 
-```ts filename="tailwind.config.ts" switcher
+```ts filename="tailwind.config.ts" highlight={5-7} switcher
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
@@ -136,12 +131,11 @@ const config: Config = {
 export default config
 ```
 
-```js filename="tailwind.config.js" switcher
+```js filename="tailwind.config.js" highlight={4-6} switcher
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
@@ -152,19 +146,17 @@ module.exports = {
 }
 ```
 
-You do not need to modify `postcss.config.js`.
-
 ### Using Tailwind
 
-Add the [Tailwind directives](https://tailwindcss.com/docs/functions-and-directives#directives) to your [Global Stylesheet](#global-css), for example:
+Add the [Tailwind directives](https://tailwindcss.com/docs/functions-and-directives#directives) to your [Global Stylesheet](#global-css):
 
 ```css filename="app/globals.css"
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-Then, import the styles in the root layout:
+Then, import the styles in the [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts):
 
 ```tsx filename="app/layout.tsx" switcher
 import type { Metadata } from 'next'
@@ -208,7 +200,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-Lastly, you can write Tailwind's utility classes in your application.
+Lastly, you can start writing Tailwind's utility classes in your application.
 
 ```tsx filename="app/page.tsx" switcher
 export default function Page() {
@@ -238,7 +230,7 @@ npm install --save-dev sass
 
 ### Customizing Sass options
 
-If you want to configure your Sass options, use `sassOptions` in `next.config.js`.
+If you want to configure your Sass options, use the [`sassOptions`](/docs/app/api-reference/config/next-config-js/sassOptions) option in `next.config.js`.
 
 ```ts filename="next.config.ts" switcher
 import type { NextConfig } from 'next'
@@ -264,8 +256,6 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-Learn more about the `sassOptions` configuration in the [API Reference](/docs/app/api-reference/config/next-config-js/sassOptions).
-
 ## CSS-in-JS
 
 > **Warning:** CSS-in-JS libraries which require runtime JavaScript are not currently supported in React Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React.

docs/01-app/01-getting-started/06-data-fetching-and-streaming.mdx

@@ -1,8 +1,10 @@
 ---
-title: How to fetch and stream data
-nav_title: Fetching Data and Streaming
-description: Learn how to fetch data and stream content in your Next.js application.
+title: How to fetch data and stream
+nav_title: Fetching data and streaming
+description: Start fetching data and streaming content in your application.
 related:
+  title: API Reference
+  description: Learn more about the features mentioned in this page by reading the API Reference.
   links:
     - app/api-reference/functions/fetch
     - app/api-reference/file-conventions/loading
@@ -87,6 +89,13 @@ export default async function Page() {
 
 ### Client Components
 
+There are two ways to fetch data in Client Components, using:
+
+1. React's [`use` hook](https://react.dev/reference/react/use)
+2. A community library like [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/latest)
+
+#### With the `use` hook
+
 You can use React's [`use` hook](https://react.dev/reference/react/use) to [stream](#streaming) data from the server to client. Start by fetching data in your Server component, and pass the promise to your Client Component as prop:
 
 ```tsx filename="app/blog/page.tsx" switcher
@@ -159,7 +168,9 @@ export default function Posts({ posts }) {
 
 In the example above, you need to wrap the `<Posts />` component in a [`<Suspense>` boundary](https://react.dev/reference/react/Suspense). This means the fallback will be shown while the promise is being resolved. Learn more about [streaming](#streaming).
 
-Alternatively, you can use a community library like [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/latest). These libraries have their own semantics for caching, streaming, and other features. For example:
+#### Community libraries
+
+You can use a community library like [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/latest) to fetch data in Client Components. These libraries have their own semantics for caching, streaming, and other features. For example, with SWR:
 
 ```tsx filename="app/blog/page.tsx" switcher
 'use client'

docs/01-app/01-getting-started/index.mdx

@@ -1,5 +1,4 @@
 ---
-title: Getting Started - App Router
-nav_title: Getting Started
+title: Getting Started
 description: Learn how to create full-stack web applications with the Next.js App Router.
 ---