### What?
I added a small change to the `with-docker-compose` example to show how to make the provided `.env` file usable.
### Why?
I struggled to understand why I could not get environment variables to work as intended and thought this small change might help someone else new to docker in the future.
### How?
Added a few comments to the `docker-compose.dev.yml` file, along with showing how to utilize a `.env` file with docker-compose
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
### What?
The TypeScript Stripe example has been fixed to address various issues. One of the issues was related to calling a function, which has now been resolved. Additionally, the Stripe API used in the example was outdated, causing an error during the build process. This issue has also been fixed.
By making these fixes, the TypeScript Stripe example should now work correctly without any function calling issues or errors related to the outdated Stripe API during the build.
### Why?
There's an issue regarding this problem `Fix with typescript stripe example fixes #50541`
```console
$ next build
- info Linting and checking validity of types ..- error ESLint must be installed in order to run during builds: yarn add --dev eslint
- info Linting and checking validity of types ...Failed to compile.
./components/CartSummary.tsx:41:24
Type error: Argument of type '{ sessionId: any; }' is not assignable to parameter of type 'string'.
39 | }
40 |
> 41 | redirectToCheckout({ sessionId: response.id })
| ^
42 | }
43 |
44 | return (
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
### How?
- Calling the `redirectToCheckout` function the right way 275cb65f3d/use-shopping-cart/react/index.d.ts (L65)
- Updating Stripe API
- Fix some changed / depcrated code since the API has changed a little
- Fix a TS error since the used library does not has a correct TS defintion file
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Updates the `with-storybook` example to be the example located in [`vercel/vercel`](https://github.com/vercel/vercel/tree/main/examples/storybook).
The motivation for this change is that we now have better support for storybook. It is now treated as its own framework and so users can specify the `storybook` framework as well as custom build command `build-storybook` in order to get near zero-config support 🌟
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Tweak code owners after some testing and feedback.
- Move the Next.js team up to be optional global code owners (so that everyone can review but are not tagged for review). Global individuals should still be tagged if there are no specific `.vercel.approvers` files in subdirectories.
- Adds @vercel/devex to image files so there's coverage on those files for the docs
- Target specific folder and files for Styfle to get notified
- Deletes some rules in the old GitHub codeowners
There are some incoming docs / MDX changes where prettier will throw an error when using the older version. Updating prettier before I bring in those changes.
Looks like the most notable change is adding parentheses around `typeof` checks in TypeScript.
**Before**
```
export type Locale = typeof i18n['locales'][number]
```
**After**
```
export type Locale = (typeof i18n)['locales'][number]
```
Move as much of codeowners as possible to use Vercel Spaces.
1. Makes `@timneutkens @ijjk @shuding @huozhi @feedthejim` global owners
2. Make the `@vercel/next-js` team _optional_ owners of **/docs**,
**/errors**, and **/contributing**, makes team owners of a few packages
as per old config.
3. Make `@vercel/devex` (docs and devrel) owners of **/docs**,
**/errors**, and **/contributing**
4. Make `@vercel/devrel` (devrel only) owners of **/examples**
5. Make `@vercel/web-tooling` owners of specific files and folders (as
per old config)
Leaves @styfle as owner of **image** files on the old config since this
pattern `/**/*image*/** ` can't be used with Vercel Spaces.
Note: We cannot add * or / at the end of files.
[Docs](https://spaces-docs.vercel.sh/docs/code-owners#:~:text=Code%20Owners%20files%20are%20meant%20to%20encourage%20distributed%20ownership%20definitions%20across%20a%20codebase.)
- Resolves#50084
The context parameter in the getServerSideProps function lacked a type, which led to a compile-time error. To resolve this, the GetServerSidePropsContext type from next was used to properly type the context parameter. This ensures type safety and allows TypeScript to catch potential errors at compile time.
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Improving Documentation or adding/fixing Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
Fixed landing page responsiveness for smaller screens
Sign in, Sign up, and User profile components centered on page
Fixed demo URL in readme
Added redirect to landing page after signout
@perkinsjr
---------
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
taken from google analytic's page:
"_On July 1, 2023, this property will stop processing data. Starting in March 2023, for continued website measurement, migrate your original property settings to a Google Analytics 4 (GA4) property, or they'll be copied for you to an existing GA4 property, reusing existing site tags._"
The package 'react-ga' doesn't support GA4, so i updated the package to 'react-ga4', the example continues primarily the same, the only differences is that specifying 'pageview' is now required instead of just setting the location of the pageview and the expection() function doesn't exist in this package.
required changes are welcomed
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
This PR affects the `examples/app-dir-mdx` project.
Currently, only an example of importing a `.mdx` file (`message.mdx`) into the `page.tsx` file is shown.
However, a more common example would be using a `.mdx` file as a page, e.g., in a blog scenario.
I added an example for this, enabled the page extension to allow `.mdx` pages, and changed the body's height, which is a cosmetic change for the newly created blog page.
Now that the beta docs have been merged into stable with the release of
13.4, this updates all links as some paths have changed due to
redirects.
---------
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Added docs that mention:
- important code-snippets from example
- links to official OTEL docs
- document NEXT_VERBOSE_OTEL
- explain what we provide out of the box
- what we don’t
- explain how you can add tracing yourself
- explain how instrumentation.js works
- it can be used for different types of instrumentation that don't use
OTEL. It's just a hook called when starting up a new node environment.
- list of all spans we instrument by default
fix NEXT-799 ([link](https://linear.app/vercel/issue/NEXT-799))
---------
Co-authored-by: S3Prototype <liuqahs15@gmail.com>
### What?
This PR introduces a new `--tailwind` flag to the `create-next-app` CLI,
to make it easier to bootstrap a Next.js app with Tailwind CSS
pre-configured. This is going to be the **default**. To opt-out of
Tailwind CSS, you can use the `--no-tailwind` flag.
### Why?
Tailwind CSS is one of the most popular styling solutions right now, and
we would like to make it easier to get started.
Currently, the closest you can come to this is by running `pnpm create
next-app -e with-tailwindcss` which will clone the
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
example. But that example is not configured for the App Router. This PR
will let you add Tailwind CSS to both `app/`, `pages/`, and start out
with TypeScript or JavaScript via the CLI prompts.
(Some community feedback
https://twitter.com/dev_jonaskaas/status/1632367991827443713,
https://twitter.com/samselikoff/status/1634662473331617794)
### How?
We are adding 4 new templates to the CLI bundle.
> Note: The styling is not pixel-perfect compared to the current
templates (using CSS modules) to require fewer overrides, but I tried to
match it as close as possible. Here are a few screenshots:
<details>
<summary><b>Current, light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/>
</details>
<details>
<summary><b>Tailwind (new), light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/>
</details>
<details>
<summary><b>Current, dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/>
</details>
<details>
<summary><b>Tailwind (new), dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/>
</details>
#### For reviewers
This introduces 4 new templates, with a very similar code base to the
original ones. To keep the PR focused, I decided to copy over duplicate
code, but we could potentially create a shared folder for files that are
the same across templates to somewhat reduce the CLI size. Not sure if
it's worth it, let me know. Probably fine for now, but something to
consider if we are adding more permutations in the future.
---
~Work remaining:~
- [x] app+ts
- [x] layout
- [x] dark mode
- [x] media queries
- [x] animations
- [x] app+js
- [x] pages+ts
- [x] pages+js
- [x] prompt/config
- [x] deprecate Tailwind CSS example in favor of CLI
- [x] update docs
- [x] add test
- [x] add [Prettier
plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
Closes NEXT-772
Related #45814, #44286
Finish up OTEL example with HTTP (we don't recommend grpc because that
package is needlessly large).
Also added a link to a simple repo with otel collector and few backends:
https://github.com/vercel/opentelemetry-collector-dev-setup
---------
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
updated zustand example to 4.3.6
changed out zustand's deprecated methods (createContext, create)
converted the example to typescript
## Why
zustand's example in nextjs repo is for zustand v3 which is quite
different to how things are done in v4, it was also in javascript.
back when when I started to use zustand in my nextjs app, this example
helped me a lot and now, I wanna do the same for devs that come here to
see how they can integrate next and zustand.
## 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)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
We want to make sure that our examples are not breaking.
We don't want to be slowed down by broken 3rd party packages, but we
need to ensure that examples covering next.js features are always green.
Added as a standalone workflow that doesn't parallelize. It will just
run on a cron schedule, so we can check for current status. We can add
Slack ping later if we need to.
The workflow tests just that our examples can build, so mostly TS
issues. We could definitely follow up with actual tests, but that is not
as low-hanging.
---------
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
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)
## Bug
Relate discussions: #38256
Occur in blog starter template.
```
Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering
at title
at head
at Head (webpack-internal:///./node_modules/.pnpm/next@13.1.6_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/pages/_document.js:279:1)
at html
at Html (webpack-internal:///./node_modules/.pnpm/next@13.1.6_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/pages/_document.js:678:104)
at Document
```
This adds `loader-runner` to the compiled packages distributed with
Next.js
This is a dependency of Turbopack's webpack loader support. Currently,
users have to manually install `loader-runner` in their application to
use webpack loaders with Turbopack. This will allow Turbopack to require
loader-runner from within the installed version of Next.js instead.
Test Plan: `require('./packages/next/dist/compiled/loader-runner/')`
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
-->
## 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)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR updates the `with-lingui` example's dependencies and the actual Lingui site URL
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Change 404 project codebase link in example with-turbopack to the
correct one
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
-->
## 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)
[Cypress](https://www.cypress.io/) recently went GA with a Component Testing offering which supports Next.js. This PR adds a brief section on what and how to use Cypress for component-level testing and updates the example project with a component test.
Any feedback on content or the example is welcome, thanks for considering!
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
First of all thanks for this amazing project and all the help you
provide with these examples.
It seems there is code duplication in this example. After some tests
locally seem to _document.js is not necessary for `gtag` to work
properly.
9d97a1e34a/examples/with-google-analytics/pages/_app.js (L30-L34)9d97a1e34a/examples/with-google-analytics/pages/_document.js (L13-L17)
I am aware of https://github.com/vercel/next.js/pull/40645 and I would
like to ask @dave-hay, @SukkaW and @ijjk to consider this is still
necessary. If so why then not move all content of the scripts from _app
to _document?
In any case, I am open to adding here some comments explaining what is
the reason for this code duplication if necessary.
<hr/>
Changes that come from https://github.com/vercel/next.js/pull/43897
1. The `event` hashChangeComplete should be removed since `/home` and
`/home/#section` is not new pageview, but just reference to the same
page.
If we go from /home to /home/#section (with a button click or a link for
example) this shouldn't trigger a new page visit on `gtag`.
For this reason, I think we should revert the changes from
https://github.com/vercel/next.js/pull/36079. If there is a better
argument of why this should stay I am also open to creating comments to
clarify this on the example since I don't think should be the default
behavior and not useful in most cases.
2. The `id="gtag-init"` was added with no context to the example from
https://github.com/vercel/next.js/pull/29530
If there is a reason for this id in the script to existing I am open to
adding a comment that clarifies this since in my experience is not
necessary at all.
Edit: Batching with https://github.com/vercel/next.js/pull/43897 as
recommended by
https://github.com/vercel/next.js/pull/43897#issuecomment-1344635000
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### Documentation / Examples
Hello Next.js 👋🏼
This PR aims to update the with-apivideo example by:
- Updating images domain name
- Switch to `export default function` for pages
- Updating the uploader playable and ingested status
### What do we use
In this example, we use several Next.js features:
- Routes and dynamic routes
- API and dynamic API routes
And api.video tools:
- NodeJS client
- React player (instead of our Player SDK)
- TypeScript uploader
Thank's in advance for your review 🙏🏼
I was updating one of my old next.js v3 apps to v13, and decided to play
around with RTK. Using the with-redux example sort of sets users up for
some weird typing issues as mentioned here:
https://github.com/reduxjs/redux-toolkit/issues/2862
I found that github issue _after_ reading through all the official RTK x
TS docs, and it seems it could have all been avoided with stricter
typing. I'm hoping RTK can add this bit to their docs soon.
The version spec for [convex](https://www.npmjs.com/package/convex) in the convex example was `latest`, which meant developers who created a project with this example during the period of time between a new convex release with non-back compatible changes and an update to the demo in this repo would have broken projects. For less stress all around, let's pin the version here!
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
