### Adding or Updating Examples
I can't import `useFormState` from `react-dom` with
`@types/react-dom@18.2.5`, so I upgrade it to the latest version of it.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
- update storybook version
- use `SWC` for perf
- pinging dep for security of the example
- update readme to have correct link
Co-authored-by: Sam Ko <sam@vercel.com>
## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
This pull request updates the dependencies in the cache-handler-redis
example. It updates the versions of the `@neshca/cache-handler`, which
introduces new features.
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
This PR fix `image-component` example viewsource paths and shimmer page
filename. Which would result a Github 404 page in the current live
example.
A flow up fix on this PR #60289
- Remove `experimental_` import for `useFormStatus`
- Update all dependencies
- Move to `postgres` so it works with any Postgres provider
- Fix a TypeScript issue
- Use `next dev --turbo`
<!-- 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 #
-->
Hi,
Fix for the accidental change, introduced in this PR
https://github.com/vercel/next.js/pull/59572, which set the `next`
version tag for the with-cypress example, to `^latest`, which causes the
`create-next-app` step to fail:
```shell
npx create-next-app --example with-cypress with-cypress-app
Creating a new Next.js app in /Users/<user>/<Project-Path>/with-cypress-app.
Downloading files for example with-cypress. This might take a moment.
Installing packages. This might take a couple of minutes.
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "^latest" of package "next@^latest": Tags may not have any characters that encodeURIComponent encodes.
```
Yarn instead, shows a list of next.js packages to select from instead.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR updates the testing guides to use App Router and TypeScript,
also updates `/examples` to show `app` and `pages` examples.
## Overview
- [x] Create a new "Testing" section that is shared between `app` and
`pages`.
- [x] Explain the differences between E2E, unit testing, component
testing, etc.
- [x] Recommend E2E for `async` components as currently none of the
tools support it.
- [x] Update setup guides for **Cypress**, **Playwright**, and **Jest**
with latest config options, and examples for `app` and `pages`.
- [x] Add new guide for **Vitest**
- [x] Clean up `/examples`: use TS, show `app` and `pages` examples,
match docs config
## Cypress
- [x] E2E Tests
- [x] Component Testing
- [x] Client Components
- [x] Server Components
- [ ] `async` components
**Blockers:**
- TS: `Option 'bundler' can only be used when 'module' is set to
'es2015' or later`. In **tsconfig.json** compilerOptions, Next.js uses
"moduleResolution": "bundler", changing it to "node" fixes the issue but
it can have repercussions.
- https://github.com/cypress-io/cypress/issues/27731
- Version 14 is currently not supported for component testing
- https://github.com/cypress-io/cypress/issues/28185
## Playwright
- [x] E2E Tests
## Jest
- [x] Unit Testing
- [x] Client Components
- [x] Server Components
- [ ] `async` components:
https://github.com/testing-library/react-testing-library/issues/1209
- [x] 'server-only': https://github.com/vercel/next.js/pull/54891
- [x] Snapshot Testing
**Blockers:**
- TS: https://github.com/testing-library/jest-dom/issues/546
- None of the solutions in the issue work with Next.js v14.0.4 and TS v5
## Vitest
- [x] Unit Testing
- [x] Client Components
- [x] Server Components
- [ ] `async` components
- [x] 'server-only'
- [x] Update vitest example
- [x] Handles CSS, and CSS modules imports
- [x] Handles next/image
## Other
- https://github.com/vercel/next.js/issues/47448
- https://github.com/vercel/next.js/issues/47299
### What?
This pull request integrates the exemplary setup for a self-hosted Next.js application utilizing Redis as a shared cache storage. The solution supports caching at both the App and Pages routers in default and standalone modes, as well as partial pre-rendering, facilitated by the [`@neshca/cache-handler`](https://github.com/caching-tools/next-shared-cache/tree/canary/packages/cache-handler) package. The package enables customizing cache handlers and replacing the default cache provided by Next.js seamlessly.
### Why?
The motivation behind this pull request is to provide an example demonstrating how Redis can be used as a shared cache in a self-hosted environment, thereby improving the scalability of hosting multiple instances of a Next.js application.
### What?
[1] Use Server Actions for auth
[2] Use Geist font
[3] Address warning about `metadataBase` in console
### Why?
[1] The co-location of Login page and authentication logic is simpler for beginners
[2] Looks nice
[3] Avoid confusing people with the starter template printing warnings
### How?
[1] Refactor Route Handlers to Server Actions
[2] Install font and set to `html`
[3] Explicitly declare the default value for `metadataBaseUrl`
### What?
[1] Simplify example
[2] Refactor `delete` method to use `cookies.set`
### Why?
[1] Make it easier to follow
[2] Fix build errors
### How?
[1] Adding comments and abstracting code into helper functions
[2] Setting cookie to empty value when removed
---------
Co-authored-by: Lee Robinson <me@leerob.io>
### What?
Move calling the `cookies` function up to the route
### Why?
This flags the route as `dynamic`, meaning we don't need to explicitly declare `export const dynamic = 'force-dynamic'`
### How?
Passing the returned `cookieStore` into Supabase helper functions, rather than the `cookies` function itself
### What?
[1] Use camelCase for SVG properties
[2] Catch expected error in cookie functions
### Why?
[1] Prints error to the console
[2] If the cookies `set` or `delete` methods are called in a Server Component, an error is thrown
### How?
[1] Change property names from kebab-case to camelCase
[2] Catch error
### What?
[1] Refactors `with-supabase` example to use new `@supabase/ssr` package
[2] Makes landing page dynamic steps to connect Next.js to Supabase
[3] Fixes a range of small bugs
### Why?
[1] Simplifies creating a Supabase client
[2] People were not understanding how to connect this template to Supabase
[3] People don't like bugs
### How?
[1] Declares a separate `createClient` function for client and server. Client version is used in Client Components, server version is used every where else - Server Components, Route Handlers, Server Actions, Middleware
[2] Makes landing page a dynamic list of next steps to guide the user to success
[3] Writing code to squash the bugs!
We already had `domains` as "not recommended" but this PR marks it as "deprecated" and prints a warning if its detected.
I also updated all examples to switch from `domains` to `remotePatterns`.
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.
### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.
If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
## History
We used to pass `onLoad` through directly to the underlying img so `onLoadingComplete` was introduced in order to handle the case when `placeholder="blur"` was used and `onLoad` would trigger before the placeholder was removed.
We have since changed the behavior of `onLoad` so that it acts the same as `onLoadingComplete` and therefore `onLoadingComplete` is no longer needed.
## What is this PR doing?
This PR marks `onLoadingComplete` as deprecated in favor of `onLoad`. In the future, we may remove `onLoadingComplete`.
### What?
Update Babel packages across the board
### Why?
Since you ship vendored presets and plugins it's impossible for people to update this stuff at their own pace - independently from Next. So users of `next/babel` are currently stuck with old versions and, for example, they might not be able to use the TS `satisfies` operator.
### How?
I just updated ranges (to pinned ones) where I could find them, run `corepack pnpm i` and re-run build scripts in the `packages/next`.
Fixes#43799
### What?
Merged a bunch of dependabot alerts in my own canary branch, mainly
postcss patch updates, and one graphql minor update, to fix moderate
security vulnerabilities in examples. Spot checked most and look good
still. EDIT: also one in scripts/send-trace-to-jaeger
### Why?
Because safety
### How?
Dependabot
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Steven <steven@ceriously.com>
### What?
- added correct deploy button urls
- uses new supabase integration
- updated readme for local development, more clearer instructions
- added opengraph image
### Why?
- old supabase integration is buggy
- readme is more clear for local development
---------
Co-authored-by: Steven Tey <stevensteel97@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
**low-priority chore change**
## What?
This PR removes the 'beta.' prefix from links beginning with it. These links are no longer in beta and are now automatically redirected to their non-beta versions. The change serves as a minor enhancement.
Adds cache control headers in the auth middleware to prevent issues with cached tokens being passed in GET API requests.
Co-authored-by: Mihály Lengyel <1129990+porcellus@users.noreply.github.com>
Co-authored-by: Nemi Shah <18233774+nkshah2@users.noreply.github.com>
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Updated with new `Metadata` API.
Here in this example there is `legacy.tsx` in `/pages` folder should i remove it or retain it??
Also in `/pages/legacy.tsx` we have defined `/preact-stars` route but we don't have the corresponding file.
I have remove `/preact-stars` from `/app/page.tsx` as there is no `/app/preact-stars/page.tsx` in this example.
And `/shared/fetch-github-stars.ts` is fetching only `next.js` stars.
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-GRAPHQL-5905181
Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
changed` failed `for `payment_failed` on line 45
### What?
Error in line 45 on type of payment_intent
### Why?
Example provided does not work
### How?
Added 'payment_'
I added the application/json header to the API lib of the Prepr example.
Because without it when statically generating an error is produced by
GraphQL.
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
There's been some confusion on the correct way to add a `nonce`, so took the opportunity here to:
- Add a new docs page for Content Security Policy
- Explained how to generate a `nonce` with Middleware
- Showed how to consume the `nonce` in a route with `headers`
- Updated the `with-strict-csp` example
- Update the `nonce` error message page
- Backlinked to the new page in a few places in the docs
It seems the app router attempts to write its cache to both `.next/cache` and `.next/server` in docker.
This fix should fix standalone output server's error `Failed to update prerender cache... [Error: EACCES: permission denied...` when deployed in a docker container with the example Dockerfile.
Related discussion: https://github.com/vercel/next.js/discussions/51164
### What?
I kindly request the maintainers to review this Pull Request, which aims to migrate the `with-mongoose` example to TypeScript with total type safety.
### Why?
By doing so, we enhance the overall quality and maintainability of the example, aligning it with modern best practices for type-safe codebases.
### How?
I have thoroughly tested the changes to ensure they do not introduce regressions and maintain compatibility with the existing codebase.
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
### What?
In the Payment Element demo, call
[`elements.update()`](https://stripe.com/docs/js/elements_object/update)
when the payment amount value is updated via slider. This ensures
wallets (Apple Pay, Google Pay) display the correct payment amount.
---------
Co-authored-by: Michael Novotny <manovotny@gmail.com>
### What?
This PR adds the `cms-sitecore-xmcloud` example.
Sitecore XM Cloud is a headless CMS platform that empowers content editors to manage content, layout, and structural aspects of web pages. The Sitecore JSS framework connects frontend JavaScript applications to the XM Cloud API, allowing retrieval of content and presentation layout information.
Sitecore JSS for Next.js integrates Next.js with Sitecore JSS, offering a structured approach to connect a Next.js application to XM Cloud. The `cms-sitecore-xmcloud` example, derived from the Sitecore JSS initializer, showcases the frontend application exclusively, omitting backend implementation details.
### Why?
While Sitecore offers detailed documentation for creating XM Cloud projects and JSS applications, existing starter templates often combine frontend and backend configurations. The `cms-sitecore-xmcloud` example focuses solely on the frontend application and includes environment variable examples to establish a connection with XM Cloud, eliminating the need for a .NET-compatible machine.
### How?
For comprehensive guidance on setting up an XM Cloud site and JSS application, refer to Sitecore and Vercel documentation. The `cms-sitecore-xmcloud` example is created using the Sitecore JSS initializer, integrating Next.js and SXA (Sitecore Experience Accelerator) add-ons. Further documentation can be found at:
- [Deploying to Vercel](https://doc.sitecore.com/xmc/en/developers/xm-cloud/walkthrough--deploying-your-front-end-application-to-vercel.html)
- [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/210/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
- [Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
- [Documentation (Create an XM Cloud project from a starter template)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/create-an-xm-cloud-project-from-a-starter-template-in-the-xm-cloud-deploy-app.html)
Co-authored-by: Steven Tey <28986134+steven-tey@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR is a larger change to documentation to make the following
updates:
- Deconstructs [Server
Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)
into "Forms and Mutations" and an API reference
- Removes content in place of future React API documentation pages
- Removes outdated [Building
Forms](https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms)
docs from the Pages Router and adds conditional content for both routes
in "Forms and Mutations"
- Adds TypeScript code blocks to API Routes page, recommends Route
Handlers for isomorphic signatures.
- Updates `revalidatePath` and `revalidateTag` docs to have a Server
Actions example.
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
When I try to deploy to Google Cloud Run it fails after some
investigation I saw this line in
.next/standalone/server.js
```javascript
const hostname = process.env.HOSTNAME || 'localhost'
```
This some how make this log when i run docker
```shell
- ready started server on 172.17.0.2:3000, url: http://172.17.0.2:3000
```
I don't know why it's logging this address even if the server running on
localhost.
So this my fix
Set hostname to 0.0.0.0 to avoid deployment failing on Google cloud run.
This PR updates the `cms-contentful` example to use:
- App Router
- TypeScript
- Draft Mode (previously Preview Mode)
- ISR / Data Cache (revalidations through `revalidateTag`)
Further, it combines many separate files into more manageable single files, and tries to better bucket provider-specific logic into the `lib/` folder. I'm hoping this can be the foundation for re-writing the rest of the `cms-*` examples to use App Router.
Overall, the code is much easier to reason about IMO. Pretty happy with the change. I sprinkled some `any`'s throughout here, but if someone wants to make it better, go for it!
https://app-router-contentful.vercel.app/
ensure `next` is the dependency of third-parties package so turbo will
build next first then `@next/third-parties` to avoid type failing
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Adds support for base64-encoded `placeholder`. Enables using placeholders without the "blur" effect.
Fixes#47639
- [x] Add support for DataURL placeholder
- [x] Add tests
- [x] Update docs
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
