4072955eba
fixes NEXT-479 ## content This PR adds a `getTracer` API to Next.js that uses the `otel/api` under the hood to provide Next.js level instrumentation through Open Telemetry. This also adds an example `with-opentelemetry` to demonstrate how it can be used, assuming you have a collector. This allows most notably to have `getServerSideProps` and `fetch` calls inside Server Components traced. ## details - we hide most internals spans, if you want to see all of them, use the NEXT_OTEL_VERBOSE=1 env var - if you want to use this, you'll need to rely on the `config.experimental.instrumentationHook` config option to initialise OTEL, like in the example ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) |
||
|---|---|---|
| .. | ||
| .vscode | ||
| app | ||
| pages | ||
| shared | ||
| .gitignore | ||
| instrumentation.js | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
Data fetch example
Next.js was conceived to make it easy to create universal apps. That's why fetching data on the server and the client when necessary is so easy with Next.js.
By using getStaticProps Next.js will fetch data at build time from a page, and pre-render the page to static assets.
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example data-fetch data-fetch-app
yarn create next-app --example data-fetch data-fetch-app
pnpm create next-app --example data-fetch data-fetch-app
Deploy it to the cloud with Vercel (Documentation).