This PR updates the documentation for the `sizes` proper in next/image to make it more clear what this prop does and why it's (very) important to use it. After feedback, I'll update this PR to also modify the future image component docs.
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Improve styled-jsx types in next.js, previously there's no `declare module` for styled-jsx and there's type name conflicts in `styled-jsx/index.d.ts` and we use a rename hack to avoid the conflicts. Now styled-jsx 5.0.3 fixed those issues.
x-ref: https://github.com/vercel/styled-jsx/pull/805
* Use require hook and alias to resolve styled-jsx
* re-export styled-jsx types from compiled
* fix lint
* add test for styled-jsx css
* setup require hook in server
* compile import path to styled-jsx/style
* revert require hook
* add test for server styled-jsx resolving
* update test
* pre copy styled-jsx assets
* fix styled-jsx dts
* add npmrc for styled-jsx e2e test
* load require hook directly
* rm legacy test
* fix lint
* fix pnpm install error
* split require hook
* only alias styled-jsx
* make styled-jsx resolving statically analyzable
* update test
Co-authored-by: JJ Kasper <jj@jjsweb.site>
* fix internal type
* allow `void` to be returned from Middleware
* mark deprecated APIs in JSDoc
* fix typo
* add missing error page
* remove unused import
Fixes#33072
I documented all `esXXX` features to be sure that they were already polyfilled. Only `es2019` feature `Object.fromEntries` is not already polyfilled by nextjs.
I added some unwanted polyfill (that are polyfilled by nextjs).
I kept the `es5`, `es6` and `es2015` "as-is" as they contain functions that does not seem to be explicitly polyfilled (all `Math` functions or `Date.now` for example) in the [polyfill file](https://github.com/vercel/next.js/blob/master/packages/next-polyfill-nomodule/src/index.js)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Add support for `--output-file` on ESLint cli, based on this discussion https://github.com/vercel/next.js/discussions/26179, and this closed PR https://github.com/vercel/next.js/pull/35154. With this flag, it is possible to save the output in a file and use it for any purpose.
## 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>
fixes https://github.com/vercel/next.js/issues/38291
## Bug
- [x] Related issues linked using `fixes #number`
- [x] 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Bug
- [x] Fixes#38047
- ~[ ] Integration tests added: do you want them added for such an unusual edge case?~ [Comment below: skipping](https://github.com/vercel/next.js/pull/38046#issuecomment-1207444526)
- [x] Errors have helpful link attached, see `contributing.md`: ~I'll wait until this approach & error message are confirmed before thinking more deeply on how to explain the error~
Sending a draft PR as reference ahead of time. 🙂
Doesn't resolve the root issue of why `_devPagesManifest.json` might fail to load. But does improve the log for when it happens. I'd suggest applying this same fix to `_devMiddlewareManifest.json` too.
<table>
<thead>
<tr>
<th></th>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody>
<tr>
<th>Console</th>
<td>
<pre>
<code>
Failed to fetch devPagesManifest TypeError: Failed to fetch
at PageLoader.getPageList (page-loader.js?e87a:30:53)
at _callee$ (router.js?8684:955:45)
at ...
</code>
</pre>
<pre>
<code>
router.js?8684:1319 Uncaught (in promise) TypeError: Cannot \
read properties of undefined (reading 'includes')
at resolveDynamicRoute (router.js?8684:1319:16)
at _callee$
at ...
</code>
</pre>
</td>
<td>
<pre>
<code>
Failed to fetch devPagesManifest: TypeError: Failed to fetch
at PageLoader.getPageList (page-loader.js?e87a:30:53)
at _callee$ (router.js?8684:955:45)
at ...
</code>
</pre>
</td>
</tr>
<tr>
<th>Visual</th>
<td><img alt="Screenshot of a Next.js runtime error: TypeError: Cannot read properties of undefined (reading 'includes')" src="https://user-images.githubusercontent.com/3335181/175854728-8d5c2051-1229-4da7-8af1-fc95236befae.png" /></td>
<td><img alt="Screenshot of a Next.js runtime error: Error: Failed to fetch _devPagesManifest.json. Is something blocking that network request?" src="https://user-images.githubusercontent.com/3335181/175854774-07895846-1a1c-4bb8-bf57-fa696b8c6ba4.png" /></td>
</tr>
</tbody>
</table>
* Add runtime to PageConfig type
* Add test case for runtime type
* Apply suggestions from code review
* dedupe type
* fix import
* fix lint
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Fixes: #38232
Fixes: https://github.com/vercel/next.js/issues/36893
Version [12.1.1-canary.5](https://github.com/vercel/next.js/releases/tag/v12.1.1-canary.5) introduced a bug, more specifically this PR: https://github.com/vercel/next.js/pull/34836
The issue described in #38232 is that the following code starts both the dev and prod servers:
```js
const start = require('next/dist/cli/next-start')
start.nextStart()
```
I searched a bit and found that `lib/get-project-dir.ts#getProjectDir()` now imports `bin/next.ts`
6b8e499c7b/packages/next/lib/get-project-dir.ts (L3)
and it calls a CLI command via
6b8e499c7b/packages/next/bin/next.ts (L137)
This `command` should not be defined, but it fallbacks to `defaultCommand`, which is `dev` (that explains why the dev server is also started)
This PR moves the `cliCommand` types and `commands` variable to a new separate file instead of `bin/next.ts`, to avoid running a CLI command when we import any file that also imports `lib/get-project-dir.ts`
Not sure how integration tests can be added for this issue, but feel free to tell me.
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
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
The 'with-static-export' example is very useful but, if a developer wants to use TypeScript, converting it is nontrivial. There are some gotchas in the GetStaticProps/GetStaticPaths functions. This example should help jumpstart TS development for sites static generation.
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
When using next/server in different environment ([vitest](https://vitest.dev/)), named import will have runtime error.
```tsx
import { NextRequest } from 'next/server'
// TypeError: NextRequest is not a constructor
const request = new NextRequest()
```
This is conflicted with current `server.d.ts` files.
## Alternative
* reverte current `server.js` to esm, them compiled it to cjs.
Upgrade the README to use Docker Compose v2, which is faster and shipped by default with Docker Desktop since April.
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
In many browsers (other than Chrome), the `alt` text is visible while the image is loading. This causes a sense layout shift since you'll see a flash of text and then the image (although lighthouse measures 0 CLS, likely because Chrome doesn't have this problem). This PR updates `next/future/image` to hide the alt text, unless there is an error while loading the image in which case the `alt` text because relevant as the fallback.
Example:
<img width="115" alt="image" src="https://user-images.githubusercontent.com/229881/183128008-0660c50c-18aa-4e64-872e-ada9a652130f.png">
Unfortunately, Safari also shows a border while lazy loading images and it cannot be styled.
See upstream issue here: https://bugs.webkit.org/show_bug.cgi?id=243601
We were resizing animated images when importing them, but we don't optimize images when they come from an upstream provider. For consistency, we can skip resizing for local animated images as well.
Fixes#39317
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Documentation / Examples
Not sure that I need to provide type to all of components or not?
Let me know if you want me to provide.
- [x] Closes#38752
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Minor Improvement
- doc of `disableStaticImages` has an incorrect reference link.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
So we don't regress on issues like #39090, #35913, #34629, #33314, etc.
Closes#35912
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Hi,
- Remove inlined CSS style which have minor performance loss. And hoist it to top of the component.
> Each time you inline an object, React re-creates a new reference to this object on every render. This causes components that receive this object to treat it as a referentially different one which have some performance pitfalls.
_Extremely sorry if I made any mistakes :(_
Corrected links to supabase examples in the `with-supabase-auth-realtime-db/README.md`
## 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
- [x] 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## 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 `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
Co-authored-by: spcma <46758907+spcma@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
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
