### What?
Update the `with-mdx` example to MDX 3.
### Why?
The example was 2 major versions behind.
### How?
By updating the version in `package.json`. Also the `@mdx-js/react`
dependency was removed, as it doesn’t work with the app directory. Users
should use `mdx-components.tsx` instead.
Refs #59693
Co-authored-by: Sam Ko <sam@vercel.com>
What?
Updated blog-starter example to support dark theme. Also added a button
to switch modes (User preference).
→ User can opt for dark / light / system mode
→ Mode is persisted using localStorage
→ Mode is also synced across browsing contexts
→ No FOUC (Flash of Unstyled Content)
→ Full SSG
→ No additional dependency
Why?
Now that dark mode is a first-class feature of many operating systems,
it’s becoming more and more common to design a dark version of your
website to go along with the default design.
How?
- Used tailwind `dark:` modifier
- Used localStorage for persisting user's preference
- Used storage event to sync the mode across tabs/iframes
- Injected script to avoid FOUC
- Added appropriate comments in the code for clarity and readability
### What?
Installing shadcn/ui after installing this example was a bad experience.
Running `npx shadcn-ui@latest init` overwrites existing files causing
errors and a confusing start.
This allows a installing shadcn/ui without these issues.
Co-authored-by: Sam Ko <sam@vercel.com>
We've been testing React v19 and we're mostly ready. Since we have a
number of upstream packages we have to update peer deps from:
```json
{
"peerDependencies": {
"react": "^18.3",
"react-dom": "^18.3"
}
}
```
to:
```json
{
"peerDependencies": {
"react": "^18.3 || ^19",
"react-dom": "^18.3 || ^19"
}
}
```
We are choosing to change the `next` semver from `latest` to `^14.2.3`.
This is to avoid the template from breaking after v15 becomes `latest`,
since package manager default behaviour doesn't handle conflicting peer
dep ranges for react very well 🙌
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
![Screenshot 2024-04-08 at 3 04
05 PM](https://github.com/vercel/next.js/assets/120007119/93be6aca-e408-4b93-bf6c-04d8dfc9b59c)
#### with-apollo
![Screenshot 2024-04-08 at 3 05
26 PM](https://github.com/vercel/next.js/assets/120007119/4dff9e20-714c-4a12-a27d-8fae4fc5c61d)
</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.