* Allow scroll prevention on hash change
Currently, `scrollToHash` is performed on every hash change, even when this change is caused by `<Link scroll={false} {...props} />`.
This change prevents scrolling in this case and allows users to specify the desired scrolling behavior in the router's `hashChangeComplete` event.
* Add test case and apply fixes
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Currently, if you render `next/link` like
```ts
<Link>
<CustomComponent />
</Link>
```
and have
```tsx
interface Props {
onClick?: () => void; // <— note we're not passing event as an argument
}
function CustomComponent({ onClick }: Props) {
return <div onClick={() => onClick?.()}>Hello</div>
}
```
It'll result in error
```
link.js?f421:21 Uncaught TypeError: Cannot read property 'defaultPrevented' of undefined
```
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Description
This year we implemented the new Apollo config using this example. We recently moved to `getServerSideProps` as well, however, this was giving us some cache problems. The issue was that the cache was older than the actual data that was coming from the server side query.
Because the `merge` of the cache in `apolloClient.js` is merging the existingCache in the initialState it will overwrite the "fresh" initialState with properties that already exists. This means that if you have something in your cache from previous client render, for example `user` with the value `null`, and you go to a new page and do a new query on the server which returns a value for the `user` field, it will still return `null` because of that `merge` function.
Since this was weird in our opinion, we've changed this in our own environment by always overwriting the existing cache with the new initialState, so that the initialState that is coming from a fresh server side query is overwriting. We thought it was a good idea to reflect this also in this example, because we couldn't think of a reason why the existing cache should overwrite fresh queries.
I've added a reproduction that shows what this is exactly about. I hope my description makes sense, let me know what you think!
## Reproduction of old scenario
Created a reproduction branch here: https://github.com/glenngijsberts/with-apollo-example. Using a different API than in the example, because of https://github.com/vercel/next.js/issues/32731.
1. checkout the example
2. yarn
3. yarn dev
4. visit http://localhost:3000/client-only
5. Hit "Update name". This will run a mutation that will update the cache automatically. Because I use a mocked API, the actual value on the API won't be updated, but this is actually the perfect scenario for the problem because in reality data can already change in the meantime when you're doing a new request.
6. Go to the SSR page
7. This will display two values: one is coming from the server side request (which is the latest data, because no cache is used in `getServerSideProps`) and the other is using the cache, which is outdated at that point, yet it's still returned because the old way of merging the cache was picking the existing cache over the initialState that was coming from the fresh server side query.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Fixes: https://github.com/vercel/next.js/issues/31240
Closes: https://github.com/vercel/next.js/pull/32324
Adding a try-catch block to handle situations when packages are found at relative path in getPackagePath function. This is likely to occur when using `preact` instead of `react-dom`, as `scheduler` package will not be found wrt `react-dom`
## Bug
- [x] Related issues linked using `fixes #31240`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
My team & I keep asking the question "What order are env vars _actually_ loaded in?".
This addition surfaces the order in a clear and readable way without having to read and understand the entire "Environment Variables" documentation first.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
The `nodeName` of an anchor inside an SVG equals the lowercase `a` instead of the html anchor's uppercase `A`.
This behavior can be seen in this plain js demo: https://jsfiddle.net/L2p8f4ve/28/fixes#23252
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## 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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- Partially fixes#25854
- Badly specified package dependency version (`graphql-let`). The new major version required manual migration. As specified [here](https://github.com/piglovesyou/graphql-let/releases/tag/v0.18.0).
- In `lib/resolvers.ts`
```Module '"*.graphqls"' has no exported member 'MutationResolvers'. Did you mean to use 'import MutationResolvers from "*.graphqls"' instead?ts(2614)```
## Fixes
- Migrate as described in migration guide for `graphql-let` above.
- Update some npm packages along the way.
fixes#32913
Adds support for decorator metadata in SWC when enabled through ts/jsconfig.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Enable editors to suggest properties for the config object. Also let TypeScript check for type errors in the configuration when using TypeScript
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
- use the nextv12 example from the storybook-addon-next repo as the with-storybook example found here: 6583c20803/examples/nextv12
- update the readme for the example to include details on what the example includes
- tweak the example from the `storybook-addon-next` repo to work with type checking and linting
Resolves#33889
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## Context
This was kindly requested by @leerob in [this issue](https://github.com/RyanClementsHax/storybook-addon-next/issues/3) on the `storybook-addon-next` repo.
P.S. thanks to @leerob for making [this video](https://www.youtube.com/watch?v=cuoNzXFLitc&t=1502s). I found it very helpful for getting me up to speed with how to contribute. I hope I did everything right for y'all. Lmk if there was something I could have done better.
This PR addresses minor docs-related styling issues on the Getting Started, Data Fetching (Get Server Side Props), etc pages. It follows the mechanics of the Docs Content Style guide to maintain consistency across all documentation.
Also fixes some minor issues such as missing period at the end of a sentence on docs pages like as Data Fetching (getStaticProps).
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
* Update font-stylesheet-gathering-plugin.ts
For production build, getting an UnhandledPromiseRejectionWarning: Unhandled promise rejection on line 29. Added rejection handling callback to allow for builds.
This breaks deployments to Vercel.
* ensure font css minimizing errors are caught/logged
Co-authored-by: JJ Kasper <jj@jjsweb.site>
as handle() returned from app.getRequestHandler() is a Promise, it has to be handled correctly. Simply returning it, works fine.
## Bug
- [x] Related issues linked using fixes #number
- [x] Integration tests added
- [x] Errors have helpful link attached, see contributing.md
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using fixes #number
- [x] Integration tests added
- [x] Documentation added
- [x] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see contributing.md
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
We want to prefix the default locale to the current path (`/path`), not the current href (`http://domain.tld/path`).
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
The recommended code for `_middleware.ts` does not work in prod, but does work locally. You need to use `request.nextUrl.pathname` to properly redirect from what I can tell. You also need to have a quick helper function to strip off the `/default` locale at the start of the pathname as we are providing `/en` as a fallback locale.
FWIW - I am pretty new to NextJS. Someone with more experience should probably review this suggestion before merging it. What I can tell you however is that the code as it is in `_middleware.ts` works locally but breaks in prod. To test this out use the code and navigate to `https//www.mysite.com` - it will work as expected on the root url, as this matches `nextUrl.href`. Now try navigating to `https//www.mysite.com/about` and you will be redirected to `https://www.mysite.com/en/https://www.mysite.com/about`.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Closes: https://github.com/vercel/next.js/pull/33762
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
* Add `async` to middleware docs.
I was reading the docs and got nervous. It looked like middleware didn't support async/await. After digging into the examples I found out it is possible.
Not 100% sure if this is the docs change yahs want, but I thought I'd open a PR just incase.
* Add middleware API note
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## Feature
Follow up for #33770
* When page config specify runtime is "nodejs", remove runtime option in functions manifest;
* If user enable `concurrentFeatures` and filesystem api, use `runtime: "web"` for those pages;
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
adding {Head, Html, Main, NextScript} from 'next/document'
setting lang="en"
I find it very useful for loading external scripts, fonts or whatever you may need for a starter package
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This fixes the comment about disabling telemetry. For now it doesn't disable telemetry for `next build` if you uncomment it.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
* Fix ambiguous flags in Dockerfile example
At least with Docker xx this Dockerfile fails to both `adduser` and `addgroup` commands due to ambiguous flags. The error message for example for `addgroup` is:
```
#5 0.292 Option g is ambiguous (gecos, gid, group)
#5 0.292 Option s is ambiguous (shell, system)
```
This PR switches both commands to use the long-format flags. I think they are also more understandable for the readers of the Dockerfile.
* Apply suggestions from code review
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
In #33968, a warning was added for script tags inserted through the
next/head component. This change unintentionally included
application/ld+json scripts, which shouldn't be triggering the
warnings (as they were originally intended to catch scripts where
loading order or timing could be important). This change adds an
exception for application/ld+json scripts, so they do not log the
warning if they are included through next/head.
We need to make some quick fixes to the Form guide. The PR changes title and meta description.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
---
## Context
Having 3 environments:
- Development: for doing testing
- Staging: for doing UAT testing
- Production: for users
In each environment, the Next.js application makes API calls to the corresponding API gateway:
- Development: https://api-development.com
- Staging: https://api-staging.com
- Production: https://api-production.com
Using `NEXT_PUBLIC_API_URL` for the `baseUrl` of [axios](https://axios-http.com/docs/intro).
Since the `NEXT_PUBLIC_API_URL` is replaced during _build time_, we have to manage to provide the corresponding `.env.production` files for Docker at _build time_ for each environment.
## Solution
Since we are using CI services for dockerization, we could setup the CI to inject the correct `.env.production` file into the cloned source code, (this is actually what we did). Doing that would require us to touch the CI settings.
Another way is using multiple Dockerfile (the former only need to use one Dockerfile), and the trick is copying the corresponding `env*.sample` and rename it to `.env.production` then putting it into the Docker context. Doing this way, everything is managed in the source code.
```
> Dockerfile
# Development environment
COPY .env.development.sample .env.production
# Staging environment
COPY .env.staging.sample .env.production
# Production environment
COPY .env.production.sample .env.production
```
Testing these images locally is also simple, by issuing the corresponding Makefile commands we can simulate exactly how the image will be built in the CI environment.
## How to use
For development environment:
```
make build-development
make start-development
```
For staging environment:
```
make build-staging
make start-staging
```
For production environment:
```
make build-production
make start-production
```
## Conclusion
This example shows one way to solve the three-environment model in software development when building a Next.js application. There might be another better way and I would love to know about them as well.
I'm making this example because I can't find any example about this kind of problem.
Co-authored-by: Tú Nguyễn <93700515+tunguyen-ct@users.noreply.github.com>
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
---
I'm getting this warning when running `yarn lint` on the local:
After a quick check, it is caused by the `tailwindConfig` option in the `prettier.config.js` file, added in PR #33614
I guess the reason is because the workspace does not install that plugin.
We can safely remove that option in the example, because it's already [the default location](https://github.com/tailwindlabs/prettier-plugin-tailwindcss):
> By default the plugin will look for this file in the same directory as your Prettier configuration file. However, if your Tailwind configuration is somewhere else, you can specify this using the tailwindConfig option in your Prettier configuration.
The warning is gone after removing that option.
Since the variable name is called `data`, I believe checking `profileData` will always be `undefined`.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Since we're always using `ReadableStream`, we should just get rid of `ResultPiper`.
This also lets us replace things like `bufferedReadFromReadableStream` with a `TransformStream` that does the same thing, so that it's `TransformStream`s all the way down.
Finally, we can get rid of the one-off call to `renderToReadableStream` and just use `renderToStream` whenever we're rendering a concurrent tree.
This commit adds a development mode warning in the console
if you try to include <link rel="stylesheet"> tags in
next/head, e.g.
```
<Head>
<link ref="stylesheet" href="..." />
</Head>
```
The warning message explains that this pattern will not
work well with Suspense/streaming and recommends using a
custom Document component instead.
## Feature
- [x] 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`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Bumping Terser from v5.7.1 to v5.10.0 fixes some minification issues:
- I specifically encountered this bug, where a boolean condition was flipped when a nullish coalescing operator was involved: https://github.com/terser/terser/pull/1045
- See [Terser's changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) for more fixes
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
