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>
### What?
In the Dockerfile example:
* Moves the `USER` command above the `COPY`s
* Removes the `--chown` on the `COPY`s
> **Note**
> I don't know for 100% sure this won't have unintended side effects. Part of my motivation for opening this PR is to sense check whether we will be causing a regression by making this change in our own projects.
>
> Please let me know if there's any concerns with this!
### Why?
Sonar security scanner flags this Dockerfile as having "security hotspots" due to the use of `--chown`
https://rules.sonarsource.com/docker/RSPEC-6504/
### How?
Make the `--chown`s redundant by setting the current user before doing the `COPY` commands.
### What?
The link to the demo in README.md for `example/cms-enterspeed`.
### Why?
The link was pointing to the wrong demo.
### How?
Updated the README.md.
### What?
1. Refactor `with-supabase` example to use server-side auth
### Why?
1. It is the recommended path for Next.js, and can serve as an example for the authentication docs
### How?
1. Move authentication methods from Client Component to Route Handlers
### Updating reproduction examples
Our current `pnpm create next-app -e reproduction-template`, which is present in our Issues template, will create a Pages app. This PR updates the default (`reproduction-template`) to App Router, and adds a `reproduction-template-pages` example.
### What?
Stop `with-supabase` template from throwing errors on build
### Why?
Dynamic Routes now fail the build, rather than console.logging an error
### How?
Export the following from any routes that use the `cookies` function
```
export const dynamic = "force-dynamic";
```
Install `encoding` as a dev dependency until this is fixed downstream
`Negotiator.languages()` accepts an array of available locales and
returns only results that are present in it.
This effectively eliminates the need to use a try-catch block when
calling `matchLocale`.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Currently `npm install` fails with
```
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR! peer react@"*" from next-redux-wrapper@7.0.5
npm ERR! node_modules/next-redux-wrapper
npm ERR! next-redux-wrapper@"^7.0.2" from the root project
npm ERR! 2 more (next, react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.3" from react-redux@7.1.3
npm ERR! node_modules/react-redux
npm ERR! react-redux@"7.1.3" from the root project
npm ERR! peer react-redux@"*" from next-redux-wrapper@7.0.5
npm ERR! node_modules/next-redux-wrapper
npm ERR! next-redux-wrapper@"^7.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
```
<!-- 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 #
-->
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Adds `supabase-js` as dependency for `with-supabase` example
### Why?
`with-supabase` example is missing `supabase-js` dependency, which is a
peer dependency of `@supabase/auth-helpers-nextjs`
### How?
Adds `supabase-js` to `examples/with-supabase/package.json`
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Update Next.js with Supabase example
### Why?
Existing example for Next.js with Supabase is out of date
### How?
- Rename `with-supabase-auth-db-realtime` to `with-supabase`
- Update example to use App Router
- Use Supabase Auth Helpers for Next.js to configure auth cookies
---------
### What?
Update **with-redux** example.
### Why?
**with-redux** example have:
- outdated packages
- outdated approaches and relies on **pages** directory
Since **app router** is stable now and is recommended to use, I've updated this example.
### How?
An update includes:
- move example to **app router**
- update **package.json** deps to the latest versions
- modernize jest by switching from **ts-node** to **@swc/jest**
- fix and overhaul **tests**
- modernize **redux** infra
- overhaul example **source code quality**
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
fixes#51332
### What?
Changed the link to the latest official Strapi example with Next.js (+ App Router), Tailwind and TypeScript.
### Why?
The current example will be archived. See related blog post: https://strapi.io/blog/introducing-the-new-strapi-starter-with-nextjs13-tailwind-and-typescript
> We'd also like to address what this means for older Strapi starters. Due to limited bandwidth, we've decided to support only this new Strapi Starter officially, and all other starters will be archived.
### How?
.
Updating the `with-sentry` example with latest dependencies versions, new feature docs, and also converted it to TypeScript.
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
### What?
I added a small change to the `with-docker-compose` example to show how to make the provided `.env` file usable.
### Why?
I struggled to understand why I could not get environment variables to work as intended and thought this small change might help someone else new to docker in the future.
### How?
Added a few comments to the `docker-compose.dev.yml` file, along with showing how to utilize a `.env` file with docker-compose
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
### What?
The TypeScript Stripe example has been fixed to address various issues. One of the issues was related to calling a function, which has now been resolved. Additionally, the Stripe API used in the example was outdated, causing an error during the build process. This issue has also been fixed.
By making these fixes, the TypeScript Stripe example should now work correctly without any function calling issues or errors related to the outdated Stripe API during the build.
### Why?
There's an issue regarding this problem `Fix with typescript stripe example fixes #50541`
```console
$ next build
- info Linting and checking validity of types ..- error ESLint must be installed in order to run during builds: yarn add --dev eslint
- info Linting and checking validity of types ...Failed to compile.
./components/CartSummary.tsx:41:24
Type error: Argument of type '{ sessionId: any; }' is not assignable to parameter of type 'string'.
39 | }
40 |
> 41 | redirectToCheckout({ sessionId: response.id })
| ^
42 | }
43 |
44 | return (
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
### How?
- Calling the `redirectToCheckout` function the right way 275cb65f3d/use-shopping-cart/react/index.d.ts (L65)
- Updating Stripe API
- Fix some changed / depcrated code since the API has changed a little
- Fix a TS error since the used library does not has a correct TS defintion file
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Updates the `with-storybook` example to be the example located in [`vercel/vercel`](https://github.com/vercel/vercel/tree/main/examples/storybook).
The motivation for this change is that we now have better support for storybook. It is now 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: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Tweak code owners after some testing and feedback.
- Move the Next.js team up to be optional global code owners (so that everyone can review but are not tagged for review). Global individuals should still be tagged if there are no specific `.vercel.approvers` files in subdirectories.
- Adds @vercel/devex to image files so there's coverage on those files for the docs
- Target specific folder and files for Styfle to get notified
- Deletes some rules in the old GitHub codeowners
There are some incoming docs / MDX changes where prettier will throw an error when using the older version. Updating prettier before I bring in those changes.
Looks like the most notable change is adding parentheses around `typeof` checks in TypeScript.
**Before**
```
export type Locale = typeof i18n['locales'][number]
```
**After**
```
export type Locale = (typeof i18n)['locales'][number]
```
Move as much of codeowners as possible to use Vercel Spaces.
1. Makes `@timneutkens @ijjk @shuding @huozhi @feedthejim` global owners
2. Make the `@vercel/next-js` team _optional_ owners of **/docs**,
**/errors**, and **/contributing**, makes team owners of a few packages
as per old config.
3. Make `@vercel/devex` (docs and devrel) owners of **/docs**,
**/errors**, and **/contributing**
4. Make `@vercel/devrel` (devrel only) owners of **/examples**
5. Make `@vercel/web-tooling` owners of specific files and folders (as
per old config)
Leaves @styfle as owner of **image** files on the old config since this
pattern `/**/*image*/** ` can't be used with Vercel Spaces.
Note: We cannot add * or / at the end of files.
[Docs](https://spaces-docs.vercel.sh/docs/code-owners#:~:text=Code%20Owners%20files%20are%20meant%20to%20encourage%20distributed%20ownership%20definitions%20across%20a%20codebase.)
- Resolves#50084
The context parameter in the getServerSideProps function lacked a type, which led to a compile-time error. To resolve this, the GetServerSidePropsContext type from next was used to properly type the context parameter. This ensures type safety and allows TypeScript to catch potential errors at compile time.
Co-authored-by: Steven <229881+styfle@users.noreply.github.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 or adding/fixing 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 #
-->
Fixed landing page responsiveness for smaller screens
Sign in, Sign up, and User profile components centered on page
Fixed demo URL in readme
Added redirect to landing page after signout
@perkinsjr
---------
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
taken from google analytic's page:
"_On July 1, 2023, this property will stop processing data. Starting in March 2023, for continued website measurement, migrate your original property settings to a Google Analytics 4 (GA4) property, or they'll be copied for you to an existing GA4 property, reusing existing site tags._"
The package 'react-ga' doesn't support GA4, so i updated the package to 'react-ga4', the example continues primarily the same, the only differences is that specifying 'pageview' is now required instead of just setting the location of the pageview and the expection() function doesn't exist in this package.
required changes are welcomed
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
This PR affects the `examples/app-dir-mdx` project.
Currently, only an example of importing a `.mdx` file (`message.mdx`) into the `page.tsx` file is shown.
However, a more common example would be using a `.mdx` file as a page, e.g., in a blog scenario.
I added an example for this, enabled the page extension to allow `.mdx` pages, and changed the body's height, which is a cosmetic change for the newly created blog page.
Now that the beta docs have been merged into stable with the release of
13.4, this updates all links as some paths have changed due to
redirects.
---------
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Added docs that mention:
- important code-snippets from example
- links to official OTEL docs
- document NEXT_VERBOSE_OTEL
- explain what we provide out of the box
- what we don’t
- explain how you can add tracing yourself
- explain how instrumentation.js works
- it can be used for different types of instrumentation that don't use
OTEL. It's just a hook called when starting up a new node environment.
- list of all spans we instrument by default
fix NEXT-799 ([link](https://linear.app/vercel/issue/NEXT-799))
---------
Co-authored-by: S3Prototype <liuqahs15@gmail.com>
### What?
This PR introduces a new `--tailwind` flag to the `create-next-app` CLI,
to make it easier to bootstrap a Next.js app with Tailwind CSS
pre-configured. This is going to be the **default**. To opt-out of
Tailwind CSS, you can use the `--no-tailwind` flag.
### Why?
Tailwind CSS is one of the most popular styling solutions right now, and
we would like to make it easier to get started.
Currently, the closest you can come to this is by running `pnpm create
next-app -e with-tailwindcss` which will clone the
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
example. But that example is not configured for the App Router. This PR
will let you add Tailwind CSS to both `app/`, `pages/`, and start out
with TypeScript or JavaScript via the CLI prompts.
(Some community feedback
https://twitter.com/dev_jonaskaas/status/1632367991827443713,
https://twitter.com/samselikoff/status/1634662473331617794)
### How?
We are adding 4 new templates to the CLI bundle.
> Note: The styling is not pixel-perfect compared to the current
templates (using CSS modules) to require fewer overrides, but I tried to
match it as close as possible. Here are a few screenshots:
<details>
<summary><b>Current, light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/>
</details>
<details>
<summary><b>Tailwind (new), light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/>
</details>
<details>
<summary><b>Current, dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/>
</details>
<details>
<summary><b>Tailwind (new), dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/>
</details>
#### For reviewers
This introduces 4 new templates, with a very similar code base to the
original ones. To keep the PR focused, I decided to copy over duplicate
code, but we could potentially create a shared folder for files that are
the same across templates to somewhat reduce the CLI size. Not sure if
it's worth it, let me know. Probably fine for now, but something to
consider if we are adding more permutations in the future.
---
~Work remaining:~
- [x] app+ts
- [x] layout
- [x] dark mode
- [x] media queries
- [x] animations
- [x] app+js
- [x] pages+ts
- [x] pages+js
- [x] prompt/config
- [x] deprecate Tailwind CSS example in favor of CLI
- [x] update docs
- [x] add test
- [x] add [Prettier
plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
Closes NEXT-772
Related #45814, #44286
Finish up OTEL example with HTTP (we don't recommend grpc because that
package is needlessly large).
Also added a link to a simple repo with otel collector and few backends:
https://github.com/vercel/opentelemetry-collector-dev-setup
---------
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
updated zustand example to 4.3.6
changed out zustand's deprecated methods (createContext, create)
converted the example to typescript
## Why
zustand's example in nextjs repo is for zustand v3 which is quite
different to how things are done in v4, it was also in javascript.
back when when I started to use zustand in my nextjs app, this example
helped me a lot and now, I wanna do the same for devs that come here to
see how they can integrate next and zustand.
## Documentation / Examples
[✓] Make sure the linting passes by running pnpm build && pnpm lint
[✓] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
We want to make sure that our examples are not breaking.
We don't want to be slowed down by broken 3rd party packages, but we
need to ensure that examples covering next.js features are always green.
Added as a standalone workflow that doesn't parallelize. It will just
run on a cron schedule, so we can check for current status. We can add
Slack ping later if we need to.
The workflow tests just that our examples can build, so mostly TS
issues. We could definitely follow up with actual tests, but that is not
as low-hanging.
---------
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
fixes NEXT-479
## content
This PR adds a `getTracer` API to Next.js that uses the `otel/api` under
the hood to provide Next.js level instrumentation through Open
Telemetry.
This also adds an example `with-opentelemetry` to demonstrate how it can
be used, assuming you have a collector.
This allows most notably to have `getServerSideProps` and `fetch` calls
inside Server Components traced.
## details
- we hide most internals spans, if you want to see all of them, use the
NEXT_OTEL_VERBOSE=1 env var
- if you want to use this, you'll need to rely on the
`config.experimental.instrumentationHook` config option to initialise
OTEL, like in the example
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
## Bug
Relate discussions: #38256
Occur in blog starter template.
```
Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering
at title
at head
at Head (webpack-internal:///./node_modules/.pnpm/next@13.1.6_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/pages/_document.js:279:1)
at html
at Html (webpack-internal:///./node_modules/.pnpm/next@13.1.6_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/pages/_document.js:678:104)
at Document
```
This adds `loader-runner` to the compiled packages distributed with
Next.js
This is a dependency of Turbopack's webpack loader support. Currently,
users have to manually install `loader-runner` in their application to
use webpack loaders with Turbopack. This will allow Turbopack to require
loader-runner from within the installed version of Next.js instead.
Test Plan: `require('./packages/next/dist/compiled/loader-runner/')`
<!--
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:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR updates the `with-lingui` example's dependencies and the actual Lingui site URL
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Change 404 project codebase link in example with-turbopack to the
correct one
<!--
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:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
[Cypress](https://www.cypress.io/) recently went GA with a Component Testing offering which supports Next.js. This PR adds a brief section on what and how to use Cypress for component-level testing and updates the example project with a component test.
Any feedback on content or the example is welcome, thanks for considering!
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
<!--
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 that you're making:
-->
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
First of all thanks for this amazing project and all the help you
provide with these examples.
It seems there is code duplication in this example. After some tests
locally seem to _document.js is not necessary for `gtag` to work
properly.
9d97a1e34a/examples/with-google-analytics/pages/_app.js (L30-L34)9d97a1e34a/examples/with-google-analytics/pages/_document.js (L13-L17)
I am aware of https://github.com/vercel/next.js/pull/40645 and I would
like to ask @dave-hay, @SukkaW and @ijjk to consider this is still
necessary. If so why then not move all content of the scripts from _app
to _document?
In any case, I am open to adding here some comments explaining what is
the reason for this code duplication if necessary.
<hr/>
Changes that come from https://github.com/vercel/next.js/pull/43897
1. The `event` hashChangeComplete should be removed since `/home` and
`/home/#section` is not new pageview, but just reference to the same
page.
If we go from /home to /home/#section (with a button click or a link for
example) this shouldn't trigger a new page visit on `gtag`.
For this reason, I think we should revert the changes from
https://github.com/vercel/next.js/pull/36079. If there is a better
argument of why this should stay I am also open to creating comments to
clarify this on the example since I don't think should be the default
behavior and not useful in most cases.
2. The `id="gtag-init"` was added with no context to the example from
https://github.com/vercel/next.js/pull/29530
If there is a reason for this id in the script to existing I am open to
adding a comment that clarifies this since in my experience is not
necessary at all.
Edit: Batching with https://github.com/vercel/next.js/pull/43897 as
recommended by
https://github.com/vercel/next.js/pull/43897#issuecomment-1344635000
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### Documentation / Examples
Hello Next.js 👋🏼
This PR aims to update the with-apivideo example by:
- Updating images domain name
- Switch to `export default function` for pages
- Updating the uploader playable and ingested status
### What do we use
In this example, we use several Next.js features:
- Routes and dynamic routes
- API and dynamic API routes
And api.video tools:
- NodeJS client
- React player (instead of our Player SDK)
- TypeScript uploader
Thank's in advance for your review 🙏🏼
I was updating one of my old next.js v3 apps to v13, and decided to play
around with RTK. Using the with-redux example sort of sets users up for
some weird typing issues as mentioned here:
https://github.com/reduxjs/redux-toolkit/issues/2862
I found that github issue _after_ reading through all the official RTK x
TS docs, and it seems it could have all been avoided with stricter
typing. I'm hoping RTK can add this bit to their docs soon.
The version spec for [convex](https://www.npmjs.com/package/convex) in the convex example was `latest`, which meant developers who created a project with this example during the period of time between a new convex release with non-back compatible changes and an update to the demo in this repo would have broken projects. For less stress all around, let's pin the version here!
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
<!--
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 that you're making:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Adds support for rendering MDX as a Server Component.
The main reason a MDX file couldn't be rendered as a Server Component is
that `@mdx-js/react` has a legacy/deprecated context setup in the file.
Because of calling `React.createContext` the MDX file couldn't be a
Server Component.
I've added support for a special file `mdx-components.tsx` (or `.js`) at
the root of the project (can be `src` dir too).
By using mdx-components you don't need a global context provider which
in turn makes MDX compatible to be rendered as a Server Component.
Note: this changes `@next/mdx` to add support for that file so it has to
be landed first before the example works.
<!--
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 that you're making:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
<!--
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 that you're making:
-->
## Documentation / Examples
Based on https://github.com/necolas/react-native-web/discussions/2217,
the `babel-plugin-react-native-web` is not necessary. Therefore, I
remove babel.config.js and npm package from package.json. This
modification will improve build performance and bundle size.
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
## Improvements to Image Gallery
- Added blur image optimization that cuts initial page size by more than half
- Added masonry layout to handle images of different sizes
- Converted querySelector to use refs
Added the types for req and res.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc]
Here is the documentation followed [Nextjs Link](https://nextjs.org/docs/basic-features/typescript)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Documentation / Examples
On [Image Component Example README](https://github.com/vercel/next.js/tree/canary/examples/image-component) was a old link to index.js file, instead of index.tsx, changed old link to a new, now page exist, insteadof 404.
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc]
When `modularizeImports` was moved out of experiimental [on this PR](https://github.com/vercel/next.js/pull/44240), `docs` and `examples` were not updated.
- Update `modularize-imports` example by removing `experimental` from `next.config.js`, as it's currently failing when deployed
- For docs: https://nextjs.org/docs/advanced-features/compiler#modularize-imports
- Move `Modularize Imports` section outside of `Experimental Features` section
- Remove `experimental` from code snippets
- Added to version history, just like when SWC Minifier became stable.
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
- Fixes `with-webassembly` example unable to build with the current
`next.config.js`.
https://github.com/vercel/next.js/issues/29362#issuecomment-932767530
- Converted example to TypeScript
```js
// Before
config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm'
// After
config.output.webassemblyModuleFilename =
isServer && !dev
? '../static/wasm/[modulehash].wasm'
: 'static/wasm/[modulehash].wasm'
```
```
> Build error occurred
Error: Export encountered errors on following paths:
/
at /Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/export/index.js:408:19
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/trace/trace.js:79:20)
at async /Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/build/index.js:1342:21
at async Span.traceAsyncFn (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/trace/trace.js:79:20)
at async /Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/build/index.js:1202:17
at async Span.traceAsyncFn (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default] (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/build/index.js:65:29)
ELIFECYCLE Command failed with exit code 1.
```
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Converted three more examples to TypeScript.
Changes to individual examples pushed as separate commits.
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
<!--
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 that you're making:
-->
Closes: https://github.com/vercel/next.js/pull/42768
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Added an image gallery example using Next.js and Cloudinary.
Edit: This is now ready to ship!
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Simplified the example to just the specific feature, and converted to TypeScript.
- `node-fetch@2` is either polyfilled by Next.js or a peerDep of `@vercel/fetch`, I can't quite tell, but either way it can be removed from the dependencies.
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
1. Fixes example unable to build with the latest version of Next.
- Next.js 13 bumped the minimum React version to [18.2.0](https://nextjs.org/docs/upgrading), but this example seems to have gotten missed.
2. Fixes example unable to run by default on Linux.
- Reverts #39372
- Fixes @balazsorban44 comment https://github.com/vercel/next.js/pull/39372#issuecomment-1208012860
- Added a comment to the README to prevent this issue from being re-introduced.
3. Build and start Next.js based on the preferred package manager.
4. Allow dependencies to install without lockfile present.
- Outputs a warning instead of exiting.
- Keeps the example faithful to the README "Develop locally without Node.js or TypeScript installed".
5. Added `next.config.js` types that got missed.
6. Updated README links now that output standalone is stable.
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Converted 3 more examples to TypeScript. Individual contributions pushed as separate commits.
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
