# Table of Contents

- [Next.js Docs: App Router | Next.js](#next-js-docs-app-router-next-js)
- [Functions: notFound | Next.js](#functions-notfound-next-js)

---

# Next.js Docs: App Router | Next.js

Menu

Using App Router

Features available in /app

Latest Version

16.0.0

[Next.js Docs](https://nextjs.org/docs)
App Router

Copy page

App Router
==========

The **App Router** is a file-system based router that uses React's latest features such as [Server Components](https://react.dev/reference/rsc/server-components)
, [Suspense](https://react.dev/reference/react/Suspense)
, and [Server Functions](https://react.dev/reference/rsc/server-functions)
.

Next Steps
----------

Learn the fundamentals of building an App Router project, from installation to layouts, navigation, server and client components.

[### Installation\
\
Learn how to create a new Next.js application with the \`create-next-app\` CLI, and set up TypeScript, ESLint, and Module Path Aliases.](https://nextjs.org/docs/app/getting-started/installation)
[### Project Structure\
\
Learn the folder and file conventions in Next.js, and how to organize your project.](https://nextjs.org/docs/app/getting-started/project-structure)
[### Layouts and Pages\
\
Learn how to create your first pages and layouts, and link between them with the Link component.](https://nextjs.org/docs/app/getting-started/layouts-and-pages)
[### Linking and Navigating\
\
Learn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.](https://nextjs.org/docs/app/getting-started/linking-and-navigating)
[### Server and Client Components\
\
Learn how you can use React Server and Client Components to render parts of your application on the server or the client.](https://nextjs.org/docs/app/getting-started/server-and-client-components)

Was this helpful?

supported.

Send

---

# Functions: notFound | Next.js

Menu

Using App Router

Features available in /app

Latest Version

16.0.0

[API Reference](https://nextjs.org/docs/app/api-reference)
[Functions](https://nextjs.org/docs/app/api-reference/functions)
notFound

Copy page

notFound
========

The `notFound` function allows you to render the [`not-found file`](https://nextjs.org/docs/app/api-reference/file-conventions/not-found)
 within a route segment as well as inject a `<meta name="robots" content="noindex" />` tag.

[`notFound()`](https://nextjs.org/docs/app/api-reference/functions/not-found#notfound)

---------------------------------------------------------------------------------------

Invoking the `notFound()` function throws a `NEXT_HTTP_ERROR_FALLBACK;404` error and terminates rendering of the route segment in which it was thrown. Specifying a [**not-found** file](https://nextjs.org/docs/app/api-reference/file-conventions/not-found)
 allows you to gracefully handle such errors by rendering a Not Found UI within the segment.

app/user/\[id\]/page.js

    import { notFound } from 'next/navigation'
     
    async function fetchUser(id) {
      const res = await fetch('https://...')
      if (!res.ok) return undefined
      return res.json()
    }
     
    export default async function Profile({ params }) {
      const { id } = await params
      const user = await fetchUser(id)
     
      if (!user) {
        notFound()
      }
     
      // ...
    }

> **Good to know**: `notFound()` does not require you to use `return notFound()` due to using the TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never)
>  type.

[Version History](https://nextjs.org/docs/app/api-reference/functions/not-found#version-history)

-------------------------------------------------------------------------------------------------

| Version | Changes |
| --- | --- |
| `v13.0.0` | `notFound` introduced. |

Was this helpful?

supported.

Send

---