* 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>
The current dependencies of the example "with-react-native-web" are outdated.
In this PR I updated them and tested that they run and work.
Newest current react and react-dom versions: 16.13.1
Newest current react-native-web and babel-plugin-react-native-web versions: 0.13.14
Mainly for the people starting with this example to have the new versions since the current versions are very far from each other.
Please merge 🙏
This PR fixes 2 issues with the mongodb example:
### 1. Fallable Caching Strategy
Calling `connectToDatabase()` multiple times before it's cached results in multiple connections being created. The latest one created was becoming the "cached" one and the others dissappear into the background.
This is now fixed by using **promise sharing** so that only one connection can ever be created.
### 2. Problematic Hot Reload
During development you can monitor your database connections and see that it continues to create more and more connections over time. Some users have reported their [databases reaching maximum connection limits](https://github.com/vercel/next.js/discussions/12229).
This is resolved by using `global` to store the cached connection. It's not ideal but it is necessary.
## Change
To opt-in to using the new layers mode by default.
## Motivation
- Reduces CSS filesize
- Prevents users from using the already deprecated old layers mode
- Removes the following console warnings:
```log
risk - There are upcoming breaking changes: purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
```
[more info](https://tailwindcss.com/docs/upcoming-changes)
When using the `with-msw` example I noticed it increased my bundle size in production, even through MSW is meant to be used in development only.
**Build size before implementing MSW**
```
Page Size First Load JS
┌ λ / 479 B 58.9 kB
├ /_app 0 B 58.4 kB
└ ○ /404 3.44 kB 61.9 kB
+ First Load JS shared by all 58.4 kB
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.b1b405.js 10.3 kB
├ chunks/framework.cb05d5.js 39.9 kB
├ chunks/main.a140d5.js 7.28 kB
├ chunks/pages/_app.b90a57.js 277 B
└ chunks/webpack.e06743.js 751 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
```
**Build size after implementing MSW according to the `with-msw` example**
```
Page Size First Load JS
┌ λ / 479 B 71.6 kB
├ /_app 0 B 71.1 kB
└ ○ /404 3.44 kB 74.6 kB
+ First Load JS shared by all 71.1 kB
├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.b1b405.js 10.3 kB
├ chunks/framework.cb05d5.js 39.9 kB
├ chunks/main.a140d5.js 7.28 kB
├ chunks/pages/_app.c58a6f.js 13 kB
└ chunks/webpack.e06743.js 751 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
```
There was a 12.7 kB large increase in the `_app` First Load JS which increased the pages' First Load JS size. I tracked the problem down to the following code:
```js
if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
require('../mocks')
}
```
Removing this reduces the `_app` First Load JS to what it was previously. The `NEXT_PUBLIC_API_MOCKING` environment variable is defined in the `.env.development` file, as this means that Next.js will only activate MSW during development/testing, which is what MSW is intended for.
After discussing with @kettanaito, the author of MSW, I did some investigation. This dynamic require statement is intended to allow tree-shaking of the MSW package for production. Unfortunately this did not seem to be working. To fix this, I changed the code to the following:
```js
if (process.env.NODE_ENV !== 'production') {
require('../mocks')
}
```
This means I could remove the `NEXT_PUBLIC_API_MOCKING` environment variable from `.env.development`, as it is no longer used.
It is important to note that this still achieves the same functionality as before: MSW runs in development / testing, and not in production. If MSW must be enabled in production for some reason, the following code can be used to run MSW regardless of the environment:
```js
if (true) {
require('../mocks')
}
```
If possible, I'd love to hear from the Next.js maintainers regarding the tree-shaking process when using environment variables.
Lastly, I made the necessary changes to have the example work in production mode as well, because there is no real backend. Of course there is a comment explaining what should be changed in a real world app.
Wrong variable was being checked for the hydrate action on redux. This was causing the count to be reset to 0 instead of being 1 when initially loading index.js page.
Fixes#17299
This is a change to add the project name as in the other examples.
When we run with the current create command, we are asked for the project name.
As follows:
```
$ npx create-next-app --example with-three-js
? What is your project named? › my-app
```
This PR removes "vercel.json" from the Yarn workspaces example. Since the release of [monorepos](https://vercel.com/blog/monorepos) support, there is no need to use the "builds" property or "vercel.json".
* Fix missing yarn.lock
* Add --frozen-lockfile flag to speed up install deps
* Make sure node_modules do not contains devDependencies
* Add --targe stage docker build
As mentioned in [here](https://www.npmjs.com/package/@types/testing-library__react), the package has been deprecated and not necessary to be installed.
By removing this from `package.json` will give other devs have more understanding when learning typescript with eslint and jest about what need to be installed on the project.
Pull request for (Issue: Fix or remove the with-rebass example #16828). Just added some missing dependencies to the package.json of the example
Fixes#16839
This uses the "Expand directories" feature introduces in Prettier 2.0 to automatically format all supported file types.
Also, I fixed some badly formatted files.
