61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
60 lines
3.1 KiB
Plaintext
60 lines
3.1 KiB
Plaintext
---
|
|
title: devIndicators
|
|
description: Configuration options for the on-screen indicator that gives context about the current route you're viewing during development.
|
|
---
|
|
|
|
`devIndicators` allows you to configure the on-screen indicator that gives context about the current route you're viewing during development.
|
|
|
|
```ts filename="Types"
|
|
devIndicators: false | {
|
|
position?: 'bottom-right'
|
|
| 'bottom-left'
|
|
| 'top-right'
|
|
| 'top-left', // defaults to 'bottom-left',
|
|
},
|
|
```
|
|
|
|
Setting `devIndicators` to `false` will hide the indicator, however Next.js will continue to surface any build or runtime errors that were encountered.
|
|
|
|
## Troubleshooting
|
|
|
|
### Indicator not marking a route as static
|
|
|
|
If you expect a route to be static and the indicator has marked it as dynamic, it's likely the route has opted out of prerendering.
|
|
|
|
You can confirm if a route is [prerendered](/docs/app/glossary#prerendering) or [dynamically rendered](/docs/app/glossary#dynamic-rendering) by building your application using `next build --debug`, and checking the output in your terminal. Static (or prerendered) routes will display a `○` symbol, whereas dynamic routes will display a `ƒ` symbol. For example:
|
|
|
|
```bash filename="Build Output"
|
|
Route (app)
|
|
┌ ○ /_not-found
|
|
└ ƒ /products/[id]
|
|
|
|
○ (Static) prerendered as static content
|
|
ƒ (Dynamic) server-rendered on demand
|
|
```
|
|
|
|
<AppOnly>
|
|
|
|
There are two reasons a route might opt out of prerendering:
|
|
|
|
- The presence of [Request-time APIs](/docs/app/glossary#request-time-apis) which rely on request information.
|
|
- An [uncached data request](/docs/app/getting-started/fetching-data), like a call to an ORM or database driver.
|
|
|
|
Check your route for any of these conditions, and if you are not able to statically render the route, then consider using [`loading.js`](/docs/app/api-reference/file-conventions/loading) or [`<Suspense />`](https://react.dev/reference/react/Suspense) to leverage [streaming](/docs/app/getting-started/linking-and-navigating#streaming).
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
When exporting [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props) from a page, it will be marked as dynamic.
|
|
|
|
</PagesOnly>
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `v16.0.0` | `appIsrStatus`, `buildActivity`, and `buildActivityPosition` options have been removed. |
|
|
| `v15.2.0` | Improved on-screen indicator with new `position` option. `appIsrStatus`, `buildActivity`, and `buildActivityPosition` options have been deprecated. |
|
|
| `v15.0.0` | Static on-screen indicator added with `appIsrStatus` option. |
|