diff --git a/.changeset/forty-snakes-clean.md b/.changeset/forty-snakes-clean.md
new file mode 100644
index 0000000000..fef383a44f
--- /dev/null
+++ b/.changeset/forty-snakes-clean.md
@@ -0,0 +1,9 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+remove @react/skip-nev #1051
+
+fix: staticImage should only set blur placeholder for jpeg,png,webp,avif
diff --git a/examples/swr-site/pages/docs/understanding.en-US.mdx b/examples/swr-site/pages/docs/understanding.en-US.mdx
new file mode 100644
index 0000000000..8ab801aa12
--- /dev/null
+++ b/examples/swr-site/pages/docs/understanding.en-US.mdx
@@ -0,0 +1,125 @@
+import { Callout } from 'nextra-theme-docs'
+import Video from 'components/video'
+
+# Understanding SWR
+
+## State Machine
+
+`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios.
+
+### Fetch and Revalidate
+
+This pattern is to fetch data and revalidate it later.
+
+![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg)
+
+### Key Change
+
+This pattern is to fetch data and change the key and revalidate it later.
+
+![A pattern for key change](/img/understanding/key-change.svg)
+
+### Key Change + Previous Data
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option.
+
+![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg)
+
+### Fallback
+
+This pattern is to fetch data and revalidate it later with fallback data.
+
+![A pattern for fallback](/img/understanding/fallback.svg)
+
+### Key Change + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with fallback data.
+
+![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg)
+
+### Key Change + Previous Data + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data.
+
+![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg)
+
+## Combining with isLoading and isValidating for better UX
+
+Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX.
+
+- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not**
+- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**.
+
+Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display.
+
+
+ Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display.
+
+
+```jsx
+function Stock() {
+ const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
+ refreshInterval: 3000
+ });
+
+ // If it's still loading the initial data, there is nothing to display.
+ // We return a skeleton here.
+ if (isLoading) return
;
+
+ // Otherwise, display the data and a spinner that indicates a background
+ // revalidation.
+ return (
+ <>
+
${data}
+ {isValidating ? : null}
+ >
+ );
+}
+```
+
+![An example of using the isLoading state](/img/understanding/isloading.gif)
+
+You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow)
+
+## Return previous data for better UX
+
+When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI:
+
+```jsx
+function Search() {
+ const [search, setSearch] = React.useState('');
+
+ const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
+ keepPreviousData: true
+ });
+
+ return (
+
+ );
+}
+```
+
+With `keepPreviousData` enabled, you will still get the previous data even if you change the SWR key and the data for the new key starts loading again.
+
+
+
+You can find the full code for this example here: https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m.
+
+## Dependency Collection for performance
+
+SWR only triggers re-rendering when the states used in the component have been updated. If you only use `data` in the component, SWR ignores the updates of other properties like `isValidating`, and `isLoading`. This reduces rendering counts a lot. More information can be found [here](/docs/advanced/performance#dependency-collection).
diff --git a/examples/swr-site/pages/docs/understanding.es-ES.mdx b/examples/swr-site/pages/docs/understanding.es-ES.mdx
new file mode 100644
index 0000000000..8ab801aa12
--- /dev/null
+++ b/examples/swr-site/pages/docs/understanding.es-ES.mdx
@@ -0,0 +1,125 @@
+import { Callout } from 'nextra-theme-docs'
+import Video from 'components/video'
+
+# Understanding SWR
+
+## State Machine
+
+`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios.
+
+### Fetch and Revalidate
+
+This pattern is to fetch data and revalidate it later.
+
+![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg)
+
+### Key Change
+
+This pattern is to fetch data and change the key and revalidate it later.
+
+![A pattern for key change](/img/understanding/key-change.svg)
+
+### Key Change + Previous Data
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option.
+
+![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg)
+
+### Fallback
+
+This pattern is to fetch data and revalidate it later with fallback data.
+
+![A pattern for fallback](/img/understanding/fallback.svg)
+
+### Key Change + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with fallback data.
+
+![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg)
+
+### Key Change + Previous Data + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data.
+
+![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg)
+
+## Combining with isLoading and isValidating for better UX
+
+Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX.
+
+- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not**
+- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**.
+
+Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display.
+
+
+ Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display.
+
+
+```jsx
+function Stock() {
+ const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
+ refreshInterval: 3000
+ });
+
+ // If it's still loading the initial data, there is nothing to display.
+ // We return a skeleton here.
+ if (isLoading) return ;
+
+ // Otherwise, display the data and a spinner that indicates a background
+ // revalidation.
+ return (
+ <>
+
${data}
+ {isValidating ? : null}
+ >
+ );
+}
+```
+
+![An example of using the isLoading state](/img/understanding/isloading.gif)
+
+You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow)
+
+## Return previous data for better UX
+
+When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI:
+
+```jsx
+function Search() {
+ const [search, setSearch] = React.useState('');
+
+ const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
+ keepPreviousData: true
+ });
+
+ return (
+
+ );
+}
+```
+
+`keepPreviousData` が有効にされている場合、SWR のキーが変わり新しいデータの取得が開始された場合にも以前のキーに対応するデータが返されます。
+
+
+
+この例のコードはこちらです: https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m.
+
+## パフォーマンのための依存収集
+
+SWR はコンポーネントで使われているデータが更新された場合のみ再レンダリングします。コンポーネントの中で `data` しか使っていない場合、SWR は `isValidating` や `isLoading` のプロパティの更新を無視します。これはレンダリングの回数を減らします。詳細については [こちら](/docs/advanced/performance#dependency-collection)。
diff --git a/examples/swr-site/pages/docs/understanding.ko.mdx b/examples/swr-site/pages/docs/understanding.ko.mdx
new file mode 100644
index 0000000000..8ab801aa12
--- /dev/null
+++ b/examples/swr-site/pages/docs/understanding.ko.mdx
@@ -0,0 +1,125 @@
+import { Callout } from 'nextra-theme-docs'
+import Video from 'components/video'
+
+# Understanding SWR
+
+## State Machine
+
+`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios.
+
+### Fetch and Revalidate
+
+This pattern is to fetch data and revalidate it later.
+
+![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg)
+
+### Key Change
+
+This pattern is to fetch data and change the key and revalidate it later.
+
+![A pattern for key change](/img/understanding/key-change.svg)
+
+### Key Change + Previous Data
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option.
+
+![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg)
+
+### Fallback
+
+This pattern is to fetch data and revalidate it later with fallback data.
+
+![A pattern for fallback](/img/understanding/fallback.svg)
+
+### Key Change + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with fallback data.
+
+![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg)
+
+### Key Change + Previous Data + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data.
+
+![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg)
+
+## Combining with isLoading and isValidating for better UX
+
+Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX.
+
+- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not**
+- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**.
+
+Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display.
+
+
+ Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display.
+
+
+```jsx
+function Stock() {
+ const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
+ refreshInterval: 3000
+ });
+
+ // If it's still loading the initial data, there is nothing to display.
+ // We return a skeleton here.
+ if (isLoading) return ;
+
+ // Otherwise, display the data and a spinner that indicates a background
+ // revalidation.
+ return (
+ <>
+
${data}
+ {isValidating ? : null}
+ >
+ );
+}
+```
+
+![An example of using the isLoading state](/img/understanding/isloading.gif)
+
+You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow)
+
+## Return previous data for better UX
+
+When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI:
+
+```jsx
+function Search() {
+ const [search, setSearch] = React.useState('');
+
+ const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
+ keepPreviousData: true
+ });
+
+ return (
+
+ );
+}
+```
+
+With `keepPreviousData` enabled, you will still get the previous data even if you change the SWR key and the data for the new key starts loading again.
+
+
+
+You can find the full code for this example here: https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m.
+
+## Dependency Collection for performance
+
+SWR only triggers re-rendering when the states used in the component have been updated. If you only use `data` in the component, SWR ignores the updates of other properties like `isValidating`, and `isLoading`. This reduces rendering counts a lot. More information can be found [here](/docs/advanced/performance#dependency-collection).
diff --git a/examples/swr-site/pages/docs/understanding.pt-BR.mdx b/examples/swr-site/pages/docs/understanding.pt-BR.mdx
new file mode 100644
index 0000000000..8ab801aa12
--- /dev/null
+++ b/examples/swr-site/pages/docs/understanding.pt-BR.mdx
@@ -0,0 +1,125 @@
+import { Callout } from 'nextra-theme-docs'
+import Video from 'components/video'
+
+# Understanding SWR
+
+## State Machine
+
+`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios.
+
+### Fetch and Revalidate
+
+This pattern is to fetch data and revalidate it later.
+
+![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg)
+
+### Key Change
+
+This pattern is to fetch data and change the key and revalidate it later.
+
+![A pattern for key change](/img/understanding/key-change.svg)
+
+### Key Change + Previous Data
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option.
+
+![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg)
+
+### Fallback
+
+This pattern is to fetch data and revalidate it later with fallback data.
+
+![A pattern for fallback](/img/understanding/fallback.svg)
+
+### Key Change + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with fallback data.
+
+![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg)
+
+### Key Change + Previous Data + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data.
+
+![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg)
+
+## Combining with isLoading and isValidating for better UX
+
+Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX.
+
+- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not**
+- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**.
+
+Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display.
+
+
+ Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display.
+
+
+```jsx
+function Stock() {
+ const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
+ refreshInterval: 3000
+ });
+
+ // If it's still loading the initial data, there is nothing to display.
+ // We return a skeleton here.
+ if (isLoading) return ;
+
+ // Otherwise, display the data and a spinner that indicates a background
+ // revalidation.
+ return (
+ <>
+
${data}
+ {isValidating ? : null}
+ >
+ );
+}
+```
+
+![An example of using the isLoading state](/img/understanding/isloading.gif)
+
+You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow)
+
+## Return previous data for better UX
+
+When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI:
+
+```jsx
+function Search() {
+ const [search, setSearch] = React.useState('');
+
+ const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
+ keepPreviousData: true
+ });
+
+ return (
+
+ );
+}
+```
+
+With `keepPreviousData` enabled, you will still get the previous data even if you change the SWR key and the data for the new key starts loading again.
+
+
+
+You can find the full code for this example here: https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m.
+
+## Dependency Collection for performance
+
+SWR only triggers re-rendering when the states used in the component have been updated. If you only use `data` in the component, SWR ignores the updates of other properties like `isValidating`, and `isLoading`. This reduces rendering counts a lot. More information can be found [here](/docs/advanced/performance#dependency-collection).
diff --git a/examples/swr-site/pages/docs/understanding.ru.mdx b/examples/swr-site/pages/docs/understanding.ru.mdx
new file mode 100644
index 0000000000..8ab801aa12
--- /dev/null
+++ b/examples/swr-site/pages/docs/understanding.ru.mdx
@@ -0,0 +1,125 @@
+import { Callout } from 'nextra-theme-docs'
+import Video from 'components/video'
+
+# Understanding SWR
+
+## State Machine
+
+`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios.
+
+### Fetch and Revalidate
+
+This pattern is to fetch data and revalidate it later.
+
+![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg)
+
+### Key Change
+
+This pattern is to fetch data and change the key and revalidate it later.
+
+![A pattern for key change](/img/understanding/key-change.svg)
+
+### Key Change + Previous Data
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option.
+
+![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg)
+
+### Fallback
+
+This pattern is to fetch data and revalidate it later with fallback data.
+
+![A pattern for fallback](/img/understanding/fallback.svg)
+
+### Key Change + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with fallback data.
+
+![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg)
+
+### Key Change + Previous Data + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data.
+
+![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg)
+
+## Combining with isLoading and isValidating for better UX
+
+Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX.
+
+- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not**
+- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**.
+
+Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display.
+
+
+ Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display.
+
+
+```jsx
+function Stock() {
+ const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
+ refreshInterval: 3000
+ });
+
+ // If it's still loading the initial data, there is nothing to display.
+ // We return a skeleton here.
+ if (isLoading) return ;
+
+ // Otherwise, display the data and a spinner that indicates a background
+ // revalidation.
+ return (
+ <>
+
${data}
+ {isValidating ? : null}
+ >
+ );
+}
+```
+
+![An example of using the isLoading state](/img/understanding/isloading.gif)
+
+You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow)
+
+## Return previous data for better UX
+
+When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI:
+
+```jsx
+function Search() {
+ const [search, setSearch] = React.useState('');
+
+ const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
+ keepPreviousData: true
+ });
+
+ return (
+
+ );
+}
+```
+
+With `keepPreviousData` enabled, you will still get the previous data even if you change the SWR key and the data for the new key starts loading again.
+
+
+
+You can find the full code for this example here: https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m.
+
+## Dependency Collection for performance
+
+SWR only triggers re-rendering when the states used in the component have been updated. If you only use `data` in the component, SWR ignores the updates of other properties like `isValidating`, and `isLoading`. This reduces rendering counts a lot. More information can be found [here](/docs/advanced/performance#dependency-collection).
diff --git a/examples/swr-site/pages/docs/understanding.zh-CN.mdx b/examples/swr-site/pages/docs/understanding.zh-CN.mdx
new file mode 100644
index 0000000000..8ab801aa12
--- /dev/null
+++ b/examples/swr-site/pages/docs/understanding.zh-CN.mdx
@@ -0,0 +1,125 @@
+import { Callout } from 'nextra-theme-docs'
+import Video from 'components/video'
+
+# Understanding SWR
+
+## State Machine
+
+`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios.
+
+### Fetch and Revalidate
+
+This pattern is to fetch data and revalidate it later.
+
+![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg)
+
+### Key Change
+
+This pattern is to fetch data and change the key and revalidate it later.
+
+![A pattern for key change](/img/understanding/key-change.svg)
+
+### Key Change + Previous Data
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option.
+
+![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg)
+
+### Fallback
+
+This pattern is to fetch data and revalidate it later with fallback data.
+
+![A pattern for fallback](/img/understanding/fallback.svg)
+
+### Key Change + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with fallback data.
+
+![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg)
+
+### Key Change + Previous Data + Fallback
+
+This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data.
+
+![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg)
+
+## Combining with isLoading and isValidating for better UX
+
+Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX.
+
+- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not**
+- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**.
+
+Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display.
+
+
+ Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display.
+
+
+```jsx
+function Stock() {
+ const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
+ refreshInterval: 3000
+ });
+
+ // If it's still loading the initial data, there is nothing to display.
+ // We return a skeleton here.
+ if (isLoading) return ;
+
+ // Otherwise, display the data and a spinner that indicates a background
+ // revalidation.
+ return (
+ <>
+
${data}
+ {isValidating ? : null}
+ >
+ );
+}
+```
+
+![An example of using the isLoading state](/img/understanding/isloading.gif)
+
+You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow)
+
+## Return previous data for better UX
+
+When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI:
+
+```jsx
+function Search() {
+ const [search, setSearch] = React.useState('');
+
+ const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
+ keepPreviousData: true
+ });
+
+ return (
+