Updates `with-react-hook-form` example by bumping react-hook-form and
other dependencies to their latest versions, along with a minor cleanup
of the UI.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
#64186 removed the pages router implementation from the `with-apollo`
example and replaced it with an app router implementation.
Unfortunately, it did so in an unsupported way.
At this point, we can not support any streaming SSR scenario without
additional helper packages - in the case of the app router, it is vital
to use the `@apollo/experimental-nextjs-app-support` package.
This PR switches the example to our officially supported patterns.
<!-- 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
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating 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 #
-->
### What?
Example update to `with-route-as-modal`, which used `react-modal@13.1.2`
### Why?
The `react-modal` version specified, did not include react 18 as
peer-dependency.
This causes users to have problems when creating the example:
https://github.com/vercel/next.js/discussions/65835
### How?
Bump version to latest available, 13.16.1.
Co-authored-by: Sam Ko <sam@vercel.com>
- Uses the new `presentationTool.resolve.locations` instead of
`presentationTool.locate` API, which doesn't require wrangling `rxjs`.
- Sets up the new `presentationTool.resolve.mainDocuments` API, which
automatically opens up the post you're previewing on the left side in
the editor on the right side.
- Removes the `sanity-typegen.json` config file as `sanity typegen` now
looks for top level `app` and `sanity` folders by default.
- Enables `^` semver ranges for deps again now that our turbopack
support is stable, so that we only have to send you PRs when bumping
majors or changing the implementation itself.
- Sets up `sanity.config.ts` so it's possible to use `npx sanity dev`
for quickly iterating on schemas.
### What?
Update the cache-handler package to the latest and changed logic for
opting out of caching during build.
### Why?
The current implementation in the cache-handler-redis example requires
an environment variable check for `REDIS_AVAILABLE` to determine if the
server has already started in order to opt out of caching during build.
This update leverages the `NEXT_PHASE` environment variable instead.
### How?
This updates the environment variable check to leverage the `NEXT_PHASE`
variable so a user doesn't have to manage a new environment variable.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Our reproduction templates are pinned to `next@canary`. This updates to
use the correct `react` & `react-dom` dependencies since `canary` is
pointed to React 19.
Fixes#65619
### What?
Fix export function name on docs/routing/layouts-and-templates
### Why?
The way it is, it will return an error to the user following the
tutorial: `Unsupported Server Component type: undefined / next js 13`
### How?
- Change `Links()` function export to `NavLinks()`
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Always use latest canary in reproduction templates
### Why?
Following up with #63038, it appears that it has not completely resolved
the issue with CodeSandbox caching lockfiles and using an outdated
version of Next.js
Eg. currently, the reproduction template URL uses `next@14.2.0-canary.9`
is not the latest canary
https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template
<img
src=https://github.com/vercel/next.js/assets/1935696/61b5cffa-90d2-4843-aaec-32e6f1e100e8
width=560>
### How?
This PR implements the following changes to the reproduction template to
install the latest version on fork:
1. On CodeSandbox "dev" task start, always update to latest Next.js with
`pnpm update next`
2. Make the CodeSandbox "dev" task restart on fork / clone of the
sandbox (@CompuIves built this feature very recently)
Observe how the `pnpm update next` script at the start of the `dev` task
runs again when forking my branch of the reproduction example:
https://github.com/vercel/next.js/assets/1935696/a3f6e65c-02cb-4eac-b0fa-367ac1751c39
cc @samcx @styfle @CompuIves
---------
Co-authored-by: Steven <steven@ceriously.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
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating 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 #
-->
### Updating Examples (blog-starter)
- Remove redundant `public` folder in `src`.
- Fix `<Link>` href.
### Why?
```tsx
<Link as={`/posts/${slug}`} href="/posts/[slug]" aria-label={title}>
```
When deploy using static exports, `href="/posts/[slug]"` will result in
a wrong request to `/posts/[slug].txt`.
Co-authored-by: Sam Ko <sam@vercel.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
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating 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?
dependencies updated for with-mongodb-mongoose example
### Why?
i used this template and everytime its outdated and was not updated for
some time so updated the deps
### How?
installed the latest version of each outdated dependency and ran the
project
Closes NEXT-
Fixes #
-->
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
Fixes a bug of removed dependencies by accident, which caused the
example not to install dependencies.
### How to test?
Running this script should initiate a project that works correctly:
```
pnpm create next-app --example with-storybook with-storybook-app
```
Fixes this pull request https://github.com/vercel/next.js/pull/64911
### What?
Updated the example `with-storybook`, by upgrading storybook to version
8.0.9 (the latest) which required bumping the version of next.js to 14
from 13 in order to make them work together.
### Why?
The motivation for this change is that we now have better the lastest
features of storybook such as chromatic and visual testing. As of
previous updates, it is still 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: Sam Ko <sam@vercel.com>
### Why?
The examples `with-apollo` and `with-graphql-hooks` included outdated
API endpoints and packages.
This resulted in the **failed Vercel Deployment** of the examples.
<details><summary>Screenshot of failed deployments</summary>
<p>
#### with-graphql-hooks
#### with-apollo
</p>
</details>
### How?
- Migrated examples from `pages` to `app` router and removed invalid API
endpoints.
- Refactored the example to a minimal template as possible with
essential features.
Closes#9865#10253#36112
---------
Co-authored-by: Sam Ko <sam@vercel.com>
Reverts vercel/next.js#63646
The example changes are missing a bunch of stuff:
- Types are not added, you can see the changes required here:
https://github.com/vercel/next.js/pull/63703
- Dependencies are missing, i.e. `@types/react` `@types/node`,
`typescript` are all missing.
Reverting as CI is broken.
### What?
Update docker examples to correctly set HOSTNAME env variable for
standalone output
Related to PR:
https://github.com/vercel/next.js/pull/52804
### Why?
### TL;DR
The dockerfiile examples need to modified as that contains HOSTNAME
setting that apparently is not working as expected.
Related to Issue:
https://github.com/vercel/next.js/issues/58657
Affected examples:
https://github.com/vercel/next.js/tree/canary/examples/with-dockerhttps://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env
### Longer explanations
Based on [Docker
document](https://docs.docker.com/engine/reference/builder/#environment-replacement):
> You can also use environment variables with RUN, CMD, and ENTRYPOINT
instructions, but in those cases the variable substitution is handled by
the command shell, not the builder.
It means that when executing the last CMD ( `node server.js` ) in
Dockerfile samples, the HOSTNAME defined by prior `ENV` instruction is
simply ignored.
This causes problems typically when the host process sets HOSTNAME -
e.g. for instance when using AWS Fargate for deployment [we can't have
control over HOSTNAME](https://stackoverflow.com/a/52871552) set by the
host process. (also refer to the issue #58657 above)
### How?
Updated Dockerfilie samples, by setting HOSTNAME directly in CMD
instruction that launches nextjs server, not in the builder process.
Used this setting at my end (with AWS Fargate) to confirm that it fixes
the network problem.
Closes NEXT-
Fixes#58657
Co-authored-by: Sam Ko <sam@vercel.com>
## Migrate the with-jotai example from page router to app router
Please if it needs further updates, Let me know!
Happy to contribute
---------
Co-authored-by: Sam Ko <sam@vercel.com>
As `@sanity/preview-url-secret` wasn't declared as a dependency when
doing:
```bash
pnpm install && pnpm build
```
It would fail to compile:
```bash
Linting and checking validity of types .Failed to compile.
./app/api/draft/route.tsx:6:36
Type error: Cannot find module '@sanity/preview-url-secret' or its corresponding type declarations.
4 | */
5 |
> 6 | import { validatePreviewUrl } from "@sanity/preview-url-secret";
| ^
7 | import { draftMode } from "next/headers";
8 | import { redirect } from "next/navigation";
9 |
```
Fixes issue where a freshly cloned example will not work in development
mode due to `unsafe-eval` being blocked by the CSP.
Currently, the example will not work in development. Running the example
with `run dev` will produce EvalError errors in console which prevent
the app from functioning. This error also prevents any `<Script>`
components with `afterInteractive` from being loaded. These issues do
not occur in production where `eval` is not used.
This PR:
- Fixes the issue by allowing `unsafe-eval` if the environment is not
`production`.
- Improves the `script-src` value by [allowing backwards compatibility
with
browsers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic)
that do not support `strict-dynamic` (`https: http: 'unsafe-inline'`
will be ignored by browsers that support `strict-dynamic`).
Some further details are available here:
https://github.com/vercel/next.js/issues/55638. This PR is not a fix for
the issue however.
- Fixes https://github.com/vercel/next.js/issues/61316
Co-authored-by: Sam Ko <sam@vercel.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
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating 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 #
-->
### What
This pr addresses an issue in Docker where the cache and the creation of
its contents throw the following error:
```
[Error: EACCES: permission denied, mkdir '/app/.next/cache'] {
errno: -13,
code: 'EACCES',
syscall: 'mkdir',
path: '/app/.next/cache'
```
Co-authored-by: Sam Ko <sam@vercel.com>
