## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [ ] Make sure the linting passes - No, I get hundreds of unrelated errors like:
```
build/babel/plugins/next-page-config.ts(8,28): error TS2307: Cannot find module 'next/types'.
build/entries.ts(11,32): error TS2307: Cannot find module '@next/env'.
build/index.ts(1,31): error TS2307: Cannot find module '@next/env'.
build/index.ts(9,10): error TS2305: Module '"next/dist/compiled/nanoid/index.cjs"' has no exported member 'nanoid'.
```
Re: https://github.com/Automattic/mongoose/issues/9987, the current Mongoose example doesn't do a good job of persisting state between hot reloads. Not sure why Lambda doesn't keep the same `import mongoose` between reloads, but it doesn't seem to. This approach lines up more closely with [Mongoose's Lambda docs](https://mongoosejs.com/docs/lambda.html) and the existing `with-mongodb` example.
I've recently built an i18n library that is tailored to usage in Next.js: [next-intl](https://github.com/amannn/next-intl). It complements the internationalized routing capabilities of Next.js by managing translations and providing them to components, as well as handling date and time formatting. It's a bit young, but I'm using it in two production apps now and I'm quite confident in the library.
Would you want to include an example and link to it?
The with-rebass example was using an outdate version of rebass(v1) which was throwing all sorts of deprecated warnings in the terminal, I've bumped up the version to the latest(v4) and made necessary changes to index.js page to keep it working.
If there is any issue, or some additional work needed, I am absolutely open to help.
Love the next.js framework and work you guys are doing ✌.
## Bug
Fixes#23293.
Problem was that `styled-jsx-plugin-sass` was used instead of `@styled-jsx/plugin-sass` so it didn't work.
You can refer to the issue that is linked for more info.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [x] Make sure the linting passes
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [x] Make sure the linting passes
This PR updates `example/with-electron`:
- Updates electron to version [12 (latest stable)](https://www.electronjs.org/releases/stable#12.0.2)
- Introduces the new `contextBridge` to increase security ([docs](https://www.electronjs.org/docs/api/context-bridge))
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [x] Make sure the linting passes
Within the "with-reason-relay" example:
- Redirect from NextJS-routed root route to reason-compiled home
## Bug
- [x] Related issues linked using `fixes #23607 `
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #23607 `
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
I don't believe NodeJS code should receive Bash syntax highlighting :).
## Bug
- [x] Related issues linked using `fixes #number`
- [] Integration tests added
## 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.
## Documentation / Examples
- [ ] Make sure the linting passes
## Documentation / Examples
- [x] Make sure the linting passes
***
Related to #23607
We should use `NEXT_PUBLIC_` as [stated here](https://nextjs.org/docs/basic-features/environment-variables) to expose environment variables to the browser.
The code was already using the correct variables name.
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [ ] Make sure the linting passes
The `with-glamor` package has been unmaintained for 4 years now.
This updates to use the new `fallback` rewrites support instead of the previous no-op rewrite workaround.
## Documentation / Examples
- [x] Make sure the linting passes
The underlying package [style-sheet](https://github.com/giuseppeg/style-sheet) has been archived, and the example doesn't currently work, so I think it's better deleted. Closes part of issue #23607
## Documentation / Examples
- [x] Make sure the linting passes
The package `next-plugin-preact` [already contains](38cfb182dd/packages/next-plugin-preact/package.json (L25)) the dependency `@prefresh/next` so it shouldn't be explicitly installed.
## Documentation / Examples
- [x] Make sure the linting passes
## 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
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [x] Make sure the linting passes
Hey 👋
I realise neither I or you want to keep reviewing and merging these "Update Stitches" PRs
So I'm setting it to the `latest`.
Thanks (and sorry)
## Documentation / Examples
- [x] Make sure the linting passes
Hello this PR is in order to update xstate to the lastest version and use the `createMachine` method instead of `Machine`.
I also added the inspect mode in order to show how we could use into a next.js app.
## Documentation / Examples
- [x] Make sure the linting passes
This pull request add typescript to the current redux-toolkit example on next.js. @markerikson suggested this nice idea to add a ts example: https://twitter.com/acemarke/status/1370877104527712259?s=20
This example is with the previous redux-toolkit example which was more complex. An example with the current example is available here: https://github.com/vercel/next.js/pull/23249
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## 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.
## Documentation / Examples
- [ ] Make sure the linting passes
This Pull Request makes [`@tailwindcss/jit`](https://github.com/tailwindlabs/tailwindcss-jit) the default engine for Tailwind CSS.
It has the following advantages:
- Lightning-fast build times because the CSS is generated on demand.
- Every variant is enabled out of the box.
- Generate arbitrary styles without writing custom CSS.
- Better performance in browser dev-tools.
I have added a new section to the `with-redux-toolkit` example on setting up Typescript with Redux Toolkit and React-Redux.
It links the redux toolkit documentation and Next.js documentation on adding Typescript to a Next.js project.
I have simplified the `with-redux-toolkit` example and changed the directory structure to "feature folders". I have removed the `notes` page and API route as it wasn't directly related to the redux toolkit. This example is also identical to the official [cra redux template](https://github.com/reduxjs/cra-template-redux). All the dependencies have also been updated.
Hiya! I was asked to add an example of how to use [Compiled](https://compiledcssinjs.com/) with Next.js, figured I might as well at it to the source 😄. Let me know if there's any changes needed.
This avoids the warning when you init a new Next.js app with the example:
```
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
```
Delete "prettier/@typescript-eslint" from .eslintrc.json.
After update to the last version I getting this error on running lint: ESLint couldn't find the config "prettier/@typescript-eslint" to extend from.
I explore this issue https://github.com/prettier/eslint-config-prettier/pull/175 and I think those extensions aren't needed anymore.
If the three dependency is upgraded to version 0.125.0 and upwards, the following errors occur:
- Compilation error: Attempted import error: 'Geometry' is not exported from 'three'.
- ReferenceError: Blob is not defined.
Solution:
Upgrade drei to `2.2.21`.
Added port config variable to the migrate-db.js script and .env.local.example files. This allows users to set the port for remote databases like Digital Ocean that don't use the default port.
We would like to maintain a single `next-auth` example under our organization. This PR points readers of the Next.js docs to our repository, instead of `with-next-auth`
Also, as @kriscarle pointed out in https://github.com/nextauthjs/next-auth/issues/1132#issuecomment-772375650, we should maybe only maintain a single example to be able to keep it up-to-date more easily.
This PR does the following:
- Update documentation referencing @zeit/fetch to @vercel/fetch
- Switch packages @zeit/fetch to @vercel/fetch
- ~~Fix `browser.js` to actually use @vercel/fetch, it was only using unfetch directly before~~
- Update React to 17
- Change folder name and package name
The links for `emotion` and `emotion-server` in the emotion example's readme were 404ing.
After going to Emotion's repo, I noticed [the packages were renamed](https://github.com/emotion-js/emotion/issues/1635).
This PR updates the links: `emotion` -> `emotion/css` and `emotion-server` -> `emotion/server`
I met following warning message after invoking create-next-app for ` example/with-typescript-eslint-jest `:
```
% yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
event - compiled successfully
```
I have followed the instructions in the link, and this patch is. Please merge this.
Thank you for reading.
I realized while looking over this that the `autoprefixer` plugin isn't being used by postcss because it's not included in the `postcss.config.js`. Additionally, since `postcss-preset-env` doesn't support PostCSS 8 yet, and it includes PostCSS 7 as a dependency, I've removed that package.
There is an open issue to add PostCSS 8 support to `postcss-preset-env` [here](https://github.com/csstools/postcss-preset-env/issues/191). @kripod's comments on my other PR #20956 are what prompted me to check this out.
On a side note, it looks like all the CMS examples use Tailwind CSS v1 still, so that's something someone (possibly myself) could tackle later.
Get rid of the unmet peer dependency warning when installing
a next.js project wtih node-sass 5.
node-sass 5 is the currently maintained version and removes
support one deprecated API and Node.js versions that Next.js does
not support either. Next.js uses node-sass 5 in devDependencies.
node-sass changelog: https://github.com/sass/node-sass/releases
On the other hand, as the docs encourage the sass package instead of node-sass,
(see errors/duplicate-sass.md)
I have updated examples which used node-sass 4 to the latest sass instead.
Fixes#20474
* Switch API url to working URL used in apollo example
* Update deps
* Move styled jsx out of the way to avoid demonstrating too many
unfamiliar concepts at once
dev, build and start work now.
* Added with-mqtt-js example
* Fixed eslint/prettier errors
* Update README.md
* Updated with-mqtt-js to latest next/react versions, WIP: Refactoring useMqtt()
* A2PC
* Working example, unrefactored
* A2PC
* Ran prettier
* Used NEXT_PUBLIC_ prefix instead of keys as props
* Updated readme and added .env.local.example
Co-authored-by: Sebastian König <sebastian_koenig@cotyinc.com>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Hi,
I'm submitting this PR for consideration as a new example app showing Styled JSX with SCSS working inside and outside storybook with example components.
Only known issue: I noticed that when running this example with:
`$ yarn next ./examples/with-storybook-styled-jsx-scss`
I receive the following error:
```
error - ./pages/_app.js
Error: [BABEL] .../next.js/examples/with-storybook-styled-jsx-scss/pages/_app.js: Cannot find module 'styled-jsx-plugin-sass' (While processing: ".../next.js/node_modules/next/babel.js")
```
However I notice that this same missing module error is triggered when running this existing example app "with-styled-jsx-scss".
Any changes/tweaks needed?
Thanks!
**What's the problem this PR addresses?**
`@next/mdx` adds the webpack loader `@mdx-js/loader` without resolving it to an absolute path
Depends on https://github.com/vercel/next.js/pull/17606
**How did you fix it?**
`require.resolve` the webpack loader before adding it
* Update dbConnect.js
The previous logic was in my opinion prone to errors in situations when different calls to this function from different locations may happen at the same time ( like a race condition ). If the readyState is anything but not 0, then we must not try to perform a new connection as this may cause consequent connections!
I hope this makes sense
* Update examples/with-mongodb-mongoose/utils/dbConnect.js
* Lint fix and minor changes
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
[DebugEngine stopped working](https://github.com/styletron/styletron/issues/366) with v9.5 since the devtool is strictly set to eval and this option is not customizable. Unfortunately there is currently no way to fix this.
* Update with-mongodb to be TypeScript-friendly
I slightly modified the approach so TypeScript can correctly infer types without actually having to type anything but the global:
**index.d.ts**
```ts
import { Db, MongoClient } from "mongodb";
declare global {
namespace NodeJS {
interface Global {
mongoCache: {
conn: {
client: MongoClient | null;
db: Db | null;
}
promise: Promise<MongoClient> | null;
};
}
}
}
```
* lint
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
I've looked at the example code and saw some consistent issues related to code style. The changes applied to this PR fixes the following points:
- Differences of line breaks styles between multiple files
- Differences of if statements styles
- Unnecessary comment
- A typo on a JSDocs
---
There were line breaks between statements on `pages/index.js`
````
export async function getServerSideProps(context) {
const { client } = await connectToDatabase()
const isConnected = await client.isConnected()
return {
props: { isConnected },
}
}
````
And this wasn't being applied to the MongoDB utility:
````
export async function connectToDatabase() {
if (cached.conn) return cached.conn
if (!cached.promise) {
const conn = {}
const opts = {
useNewUrlParser: true,
useUnifiedTopology: true,
}
{...}
````
And also, as shown in the snippet above, there are different styles of if statements being used.
With that being said, the reason I made this PR is because I think that this kind of inconsistent arises questions when a contributor looks to the codebase, even if this is a simple example.
Hi ✌️
I've seen that many people have problem with implement Google Tag Manager, I've created an example of how insert "Google Tag Manager" in a NextJs app
* docs: add example of Ionic with TypeScript
* docs: fix example code typo
* fix: support ionicons
* docs: fix example code by ESLint and prettier
* docs: example remove invalid config
* Renamed example to with-ionic-typescript
* Updated .gitignore
* Updated readme
* Updated package.json
Co-authored-by: Hidetaka Okamoto <info@wp-kyoto.net>
Co-authored-by: Luis Alvarez <luis@vercel.com>
This PR removes the `next.config.js` file with an `env` key and instead modifies the setup script to create a `.env.local` file with the provided credentials.
I also made some changes to the Deploy Button to ask for the environment variables when creating a new project.
## Problems with the other implementation
- pixel not working first time load page (this generate fake information to facebook analytics data)
- package react-facebook-pixel error when try use events in code blocks or other pages with the current implementation
- sometimes pixel mark twice pageview (this generate warning in facebook panel)
- standar or custom events not working
## Solutions
- Initialize pixel when entering each page (_document)
- Now, we can use custom and standar events (utils/fpixel.js)
- correct way to implement pixel according to facebook and guide facebook to implement in SPA
- this solution is complemented with example "with-google-analytics"
In my opinion, the other development has problems, but I preferred created a new example because the way to implement the base code is different. It seems that the other example is based on set the events from the Facebook control panel then this method limits an advanced implementation.
Hello, this PR updates the with-tailwindcss-emotion example to be compatible with tailwindcss 2.0
Here is a summary of all the changes:
- update `.babelrc` config
- update `README.md`
- delete `@emotion/css component` (makes the example simpler)
- update `@emotion/react` component to use xwind
- update `@emotion/styled` component to use xwind
- Add global styles to `_app.js`
- remove `_document.js` page
- remove `base.css` global style files (global styles are added in _app.js)
- update `tailwind.config.js`
- update `package.json` dependencies + remove unnecessary `build:base-css` script
By default, MobX 6 and later require that you use `actions` to make changes to the state, otherwise, it issues a warning in the console, because the `hydrate` method of the `store.js` class hasn't been declared an action, you can see this warning if you try to load pages that use hydration (ssg, ssr).
This pull request fixes that.
More info about the behavior:
https://mobx.js.org/actions.html#disabling-mandatory-actions-
I couldn't find an example when creating an SSR page using firebase's firestore data, so I improved the example based on the actual app I created
My sample app: https://github.com/mikan3rd/commitly
Mobx version 6 has been released, and it's a big one.
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Just released <a href="https://twitter.com/hashtag/mobx?src=hash&ref_src=twsrc%5Etfw">#mobx</a> 6! <br><br>👉 makeAutoObservable 😍<br>👉 Decorator free by default<br>👉 Fully revamped docs for modern React <br>👉 Supersedes both MobX 4 and 5<br>👉 Codemod for migration<a href="https://t.co/U6EpZaNhyz">https://t.co/U6EpZaNhyz</a></p>— Michel Weststrate (@mweststrate) <a href="https://twitter.com/mweststrate/status/1311344102991159296?ref_src=twsrc%5Etfw">September 30, 2020</a></blockquote>
Decorator support is officially dropped, so the syntax for creating observable objects has changed (checkout store.js).
There is no need for custom babel configuration anymore.
In comparison to current mobx examples, the difference is that I'm using regular `React.useContext` and `React.createContext` to consume the mobx store, [this is recommended by the official documentation.](https://mobx.js.org/react-integration.html#using-external-state-in-observer-components)
When the component is wrapped in the observer function, the component function is given a name so it appears correctly in the react development tools.
As of mobx v6 `mobx-react` package bundles `mobx-react-lite` so I could have used that package, but I've decided to use the `lite` one, because of the size.
Adding a example with **Neo4j** native graph database.
- with-apollo-neo4j-graphql: basic apollo configuration with neo4j driver and neo4j-graphql-js.
:)
The intention is to show people the correlation between things, in this case, understand the usage of the same key from the props and the rehydration.
Hopefully, this change will bring value as it has done with some Juniors already.
`url` object is an instance of `url.URL` which has no property called `query` and it's causing an error with Next image-optimizer as you can see with the error log below.
```log
TypeError: Cannot destructure property 'url' of 'parsedUrl.query' as it is undefined.
at imageOptimizer (/[redacted]/node_modules/next/next-server/server/image-optimizer.ts:51:11)
at Object.fn (/[redacted]/node_modules/next/next-server/server/next-server.ts:617:11)
at Router.execute (/[redacted]/node_modules/next/next-server/server/router.ts:200:40)
at DevServer.run (/[redacted]/node_modules/next/next-server/server/next-server.ts:1017:41)
at DevServer.run (/[redacted]/node_modules/next/server/next-dev-server.ts:406:18)
at DevServer.handleRequest (/[redacted]/node_modules/next/next-server/server/next-server.ts:437:14)
at /[redacted]/server/next-wrapper.ts:9:5
```
1. updates the `.gitignore` for this example to ignore the temporary output folders. ( similar to #15783 )
2. change yarn run script to npm run script ( I don't like use yarn currently. )
* Add info about SENTRY_URL on source map uploading
* Update examples/with-sentry/README.md
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Added `<Html>` and `<Head>` components in the custom `_document.js` for the with-fela example package
This fixes an issue where fela `<style>` tags were not added and sent as part of the server-side rendered HTML payload, causing a FOUC.
If the example is cloned and ran with no further setup (no environment variables set up), it will error out because `extractPostEntries` will return `undefined` which can not be serialized by `getStaticProps `.
This PR basically ensures that we return an empty array instead of the `undefined` for a collection of posts, and a `null` instead of the `undefined` for a single post.
## New features
- Example of how to use `Sentry.captureException()` in API routes 5a35982717
## Bug fixes
- Server-side source maps now work in Sentry when deployed to Vercel 629a9ed504
- If uploading source maps, `Sentry.init()` now sets the `release`, so that exceptions are correctly associated with the source maps in that release
## Open issues
### `_error.js` is unused for `getServerSideProps` errors when deployed to Vercel
Instead of rendering this example's overridden `_error.js` (like it does when testing locally with `NODE_ENV='production'`), when deployed to Vercel and an Error is thrown from `getServerSideProps`, this page is shown:
This confuses me because the Error is still successfully sent to Sentry, but I would've expected it to be sent by the call to `Sentry.captureException()` in `_error.js`. I'm not sure why it works.
### API test 2 & 3 don't work in the "server" build config
They don't work when deployed to Vercel in the "serverless" config either, but that's expected because there aren't any handlers to flush the Sentry queue. I can't figure out why they don't work in the long-lived "server" config.
- Changed script `start` to `dev` and improved it #18934 adding commando to transpile electron code;
- Added some folders into `.gitignore`;
- Updated react to avoid issues as #18916Fixes#18934
Now that all Contentful spaces support GraphQL, we are looking into switching the example from using a JS library to a simple fetch with GraphQL.
@stefanjudis ☝️
- new chakra-ui rc version doesn't work without 'farmer-motion', installed farmer motion
- updated 'chakra-ui' library from '^1.0.0-rc.3' to '^1.0.0-rc.8'
* small tweaks for those testing on an existing site with missing author or featured image on posts
When migrating WordPress or using an exisitng site, sometimes you have published posts wth missing data. The graphql plugin will properly resolve these to null, but some of existing code accessing tries to access the node property on these null values. I've made these properties optional in the pages and also tweaked some of the components along similar lines.
* Lint fix
Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
