There's a missing type in with-styled-coponents example's _document.tsx file
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Converted AMP example over to TypeScript to match the Contribution guidelines, updated all dependencies, and made some necessary changes to allow AMP apps to build in TypeScript.
I added an additional .d.ts file, and referenced it in the tsconfig.json include array, as per the [Next.js docs](https://nextjs.org/docs/basic-features/typescript#existing-projects). These additional types are required to allow lowercase AMP elements to be a property on JSX.IntrinsicElements.
Fixes:
> Property 'amp-img' does not exist on type 'JSX.IntrinsicElements'.ts
I also replaced all occurrences of styled JSX with [@ijjk's workaround](https://github.com/vercel/next.js/issues/7584#issuecomment-503376412) to get styles in the head at build time for AMP-only pages, hybrid AMP pages, and normal pages (non-AMP).
I tried using the useAmp hook first with multiple `<style jsx>` like this [Next.js discussion](https://github.com/vercel/next.js/discussions/16755), however AMP expects a [single `<style amp-custom>` tag in the head](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets).
Fixes:
> The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Documentation / Examples
The markdown format for blog-starter example was broken, so fixed it.
- [x] Make sure the linting passes by running `pnpm lint`
It failed, without my changes.
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Title self-explanatory: the package.json inside of the with-chakra-ui example template has been updated to newer versions
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
TypeScript is being leveraged for new examples going forward, so I'm converting this example over. 😂
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
`with-docker-compose` contains everything needed to get Next.js up and running with Docker Compose.
This example aims to provide an easy-to-use, Next.js app development and production environment, **all without Node.js being installed** on the host machine. This ensures a consistent development environment across Windows, MacOS, and Linux teams.
I was inspired to create this, because the existing [with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker) example only uses Docker to build the final production artifacts, not provide a development environment. Docker Compose easily syncs changes with containers for Hot Reloading, parallel builds, and networking, making it a powerful and consistent development tool.
Developers can **easily extend this example** by modifying the YAML files to include Nginx, Postgres, and other Docker images.
This example takes advantage of Docker multistage builds combined with the Next 12.1 [Output Standalone](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental) feature, to create up to **80% smaller apps** (Approximately 110 MB compared to 1 GB with create-next-app). I also included an example without multistage builds, for developers who don't want to get into the weeds.
I have been tweaking this Docker Compose setup over 3 years of real world use, but please let me know if anything can be improved.
The Contributing guidelines say TypeScript should be leveraged for new examples, so I thought I'd convert this example over.
I also:
- Upgraded all dependencies
- Replaced the `prop-types` package with TypeScript types
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
* Update upchunk to latest (2.3.1).
* Add mux-player package to package.json
* WIP: Make VideoPlayer return mux-player
* Remove unused code from prev video player
* Use mux-player-react directly
* Fix import line for mux-player-react
* chore: fix lint issues
In my last PR I removed the request library as it is obsolete and the application does not use it. The database setup utility does though, so I am reverting this change.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This is just a bump of tech stack used in the example and small rewrite of swr functionality.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ x ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Documentation / Examples
- [X] Make sure the linting passes by running `yarn lint`
Graphql API has updated with use of nodes, this bugfix updates these specifications.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Fixes https://github.com/vercel/next.js/issues/37230
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
* Updates the `cms-kontent` example `Image` component to implement the
suggested improvements from @styfle in #37188.
* Simplifies the Kontent loader host checking.
* Reduces the default image quality to from `100` to `75`.
* Add `tslib` dependency to fix `Module not found: Can't resolve 'tslib'`
error when importing `transformImageUrl` in the `Image` component.
It looks like this might be a bug in v11 of the Kontent Delivery SDK,
as it appears `tslib` needs to be included as dependency, rather than
dev dependency. I missed this originally as the example runs fine in
the Next repo as the root `yarn.lock` has `tslib`. It's only when the
example is used via `yarn create next-app` that the issue occurs. We
can likely remove this in future alongside an upgrade to the SDK
package once this issue has been fixed and released there.
https://github.com/vercel/next.js/pull/37188
* Updates the Kontent Delivery SDK from v9 to v11.
* Updates the `lib/api.js` code that utilises the SDK accordingly.
* Removes `rxjs` as this is no longer a dependency of the Kontent
Delivery SDK in v11.
* Updates other packages to the latest versions, including `react`.
Ref:
* https://kontent.ai/blog/news-in-javascript-sdks/
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Improve the Next.js with TypeScript + GraphQL example:
- [x] use GraphQL Code Generator instead of `graphql-let`: more widespread tool and smaller bundle size (types only generation vs code generation)
- [x] use GraphQL Yoga instead of Apollo Server Micro: for lighter bundle size as [stated here](https://github.com/vercel/next.js/pull/36155)
- [x] introduces GraphQL Code Generator on the API side for Resolvers typing
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
GraphQL Yoga provides a more extensible experience ([Envelop plugins](https://envelop.dev/)) and lighter bundle than the previously showcased `apollo-server-micro` ([64.5kB](https://bundlephobia.com/package/@graphql-yoga/node@2.2.1) vs [196.2kB](https://bundlephobia.com/package/apollo-server-micro@3.6.7) - min & GZiped)
Similar to Next.js, GraphQL Yoga comes with strong defaults and out-of-the-box support for modern GraphQL features (File uploads, subscriptions, and more).
Strong of many years of existence and a large community, GraphQL Yoga 2.0 comes with Next.js support with no additional package or configuration 📦
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Current implementation causes bugs when navigating between SSG,SSR and
Client Side pages as cache gets overwritten.
Reusing more appropriate implementation used in example
api-routes-apollo-server-and-client-auth introduced with commit
4bbdd09097
Use Apollo onError in order to flag GraphQL errors in the next.js server logs in the with-apollo example
https://www.apollographql.com/docs/react/api/link/apollo-link-error/
## Documentation / Examples
- [x] Make sure the linting passes
~⚠️ I lazily created this PR from Github directly as I don't have a local build of next.js on my current machine.
If ever linting does not pass, I will update this later today (sorry for the noise).
EDIT: it does not, I will update this PR shortly.~
Windows users cannot use the `rm` and `touch` commands. So I replaced it with `rimraf` and `touch` package.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Made SSG and SSR code similar. Comments and variable renames on store.js
Checklist:
## Documentation / Examples
- [✓] Make sure the linting passes by running `yarn lint`
Closes [#26337](https://github.com/vercel/next.js/issues/26337).
This PR fixes #26337.
The issue is just the version of xwind basically.
Not compatible with newer versions and jit mode.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Update the README for `examples/with-segment-analytics`:
- Update reference from `_document.js` (removed in 92d87870af) to `_app.js`.
- Update reference links
- Make small language tweaks
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Hi, this signature confused me a bit when I was porting it in typescript. Turns out there's dead code: there's no Error object passed to this function. Details of this signature are in this answer: https://stackoverflow.com/a/56291567/2123547, and in `@types/express-server-static-core` it is `listen(port: number, callback?: () => void): http.Server;`. Types definitions: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/express-serve-static-core/index.d.ts#L1198fixes#37053
## Bug
- [x ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ x] Make sure the linting passes by running `yarn lint`
Update version of supertokens-auth-react to add react 18 support.
Co-authored-by: Bhumil Sarvaiya <21988812+bhumilsarvaiya@users.noreply.github.com>
Co-authored-by: Joel Coutinho <6310783+jscyo@users.noreply.github.com>
The error reported here is unclear and un-helpful so we shouldn't be recommending to report this by default.
x-ref: [slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1652466540356879)
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Follow-up: https://github.com/vercel/next.js/pull/36858#pullrequestreview-971074854
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
the value and help-text were irritating
the value of the help-text is now used as value
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
The [with-facebook-pixel](https://github.com/vercel/next.js/tree/canary/examples/with-facebook-pixel) example attempts to run the <Script /> loading the Facebook Pixel on every request. This results in a warning stating `[Meta Pixel] - Duplicate Pixel ID: xxx`. According to the Next.js docs, by using an [id on the inline script](https://nextjs.org/docs/basic-features/script#inline-scripts) Next is able to track and optimize the script. Since this is absent on the present example, the inline script is continuously loaded on every request.
I've added an id to this inline script, and the warning from facebook is no longer present.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
Ref: https://github.com/vercel/next.js/issues/36842, https://github.com/vercel/next.js/pull/36632, https://github.com/vercel/next.js/pull/36787
Upgrading to Jest 28, and aligning Babel example with `with-jest`
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
## Documentation / Examples
- Updating Tina Demo URL
- Adding Tina to blog-starter example
- Adding Tina to Basic features section
- Updating Tina to actually work again
