Fixes#61941 example blog-with-comment.
The root issue is that the SWR fetcher does not check the `ok` status of the response, and that way we end up putting the error message object into the SWR data. And then `.map` is invoked in the object.
Since this is a learning kind of example, I think perhaps the presented change is just about enough to understand what's going on. Whether or not the people using the example want to gain access to the message from the server is up to them.
### What?
[1] Clean up `with-supabase` example following patterns from @leerob's
recent video on authentication
[2] Add images to matcher to reduce number of times a session is
refreshed
[3] Move instantiation of `cookieStore` into Supabase server helper
### Why?
[1] Make template easier to understand and use
[2] Reduce likelihood users will receive Auth Rate Limit Exceeded error
[3] Makes creating a Supabase client much simpler in Server Components,
Route Handlers and Server Actions
### How?
[1] Refactor middleware and its helper function
[2] Add image extensions to middleware matcher
[3] Call `cookies()` function from `createClient` helper - this should
still be in the [same execution
context](https://nextjs.org/docs/messages/dynamic-server-error) and
appears to work from my testing, but would be good to get the 👍 from
someone at Vercel
### What?
Enhancement of _with-supabase example_. Replacing in **middelware.ts**,
**supabase.auth.getSession()** with **supabase.auth.getUser()**
### Why?
**Never trust supabase.auth.getSession() inside server code such as
middleware**. It isn't guaranteed to revalidate the Auth token.
**It's safe to trust getUser()** because it sends a request to the
Supabase Auth server every time to revalidate the Auth token.
[Setting up Server-Side Auth for
Next.js](https://supabase.com/docs/guides/auth/server-side/nextjs)
Fixing a simple case sensitivity error in the import statement,
"storeProvider" should be "StoreProvider".
Co-authored-by: Steven <steven@ceriously.com>
### Adding or Updating Examples
- Example:
[with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)
- Update: The latest change introduced in #61466 on the building process
of NextJS when the package manager is PNPM is currently throwing an
error (it works for npm though).
**To replicate the error:**
1. Checkout on the **with-docker** example
2. Install with PNPM so that it generates the pnpm-lock.yaml
3. Build the Docker image -> This will fail on the _builder stage_ step
that runs `pnpm run build`.
**Possible Solution:**
- Run `corepack enable pnpm` before building with pnpm
### What?
This updates the `blog-starter` example to Next 14.1 App Router.
### Why?
I checked out a new `blog-starter` project on Vercel and was surprised
it was using the Pages Router. I believe the App Router is a better
choice.
### How?
I tried to keep the implementation logic as close to the original Pages
`blog-starter`.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
This pull request updates the `cache-handler-redis` example with a
stabilized API. The updated `next.config.js` now uses the stable
`cacheHandler` option instead of the
`experimental.incrementalCacheHandlerPath`.
### 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
