Skip to content

Update Next.js config and docs for 13.1 #3897

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reidbarber merged 3 commits into from
Jan 10, 2023
Merged

Update Next.js config and docs for 13.1 #3897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
673ece8
update next.js and config in example
reidbarber Jan 9, 2023
592dbc4
update docs
reidbarber Jan 9, 2023
1493d24
delete yarn.lock
reidbarber Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 54 additions & 55 deletions examples/rsp-next-ts/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,58 @@
const withTM = require("next-transpile-modules")([
"@adobe/react-spectrum",
"@react-spectrum/actiongroup",
"@react-spectrum/badge",
"@react-spectrum/breadcrumbs",
"@react-spectrum/button",
"@react-spectrum/buttongroup",
"@react-spectrum/calendar",
"@react-spectrum/checkbox",
"@react-spectrum/color",
"@react-spectrum/combobox",
"@react-spectrum/contextualhelp",
"@react-spectrum/datepicker",
"@react-spectrum/dialog",
"@react-spectrum/divider",
"@react-spectrum/dnd",
"@react-spectrum/form",
"@react-spectrum/icon",
"@react-spectrum/illustratedmessage",
"@react-spectrum/image",
"@react-spectrum/label",
"@react-spectrum/labeledvalue",
"@react-spectrum/layout",
"@react-spectrum/link",
"@react-spectrum/list",
"@react-spectrum/listbox",
"@react-spectrum/menu",
"@react-spectrum/meter",
"@react-spectrum/numberfield",
"@react-spectrum/overlays",
"@react-spectrum/picker",
"@react-spectrum/progress",
"@react-spectrum/provider",
"@react-spectrum/radio",
"@react-spectrum/slider",
"@react-spectrum/searchfield",
"@react-spectrum/statuslight",
"@react-spectrum/switch",
"@react-spectrum/table",
"@react-spectrum/tabs",
"@react-spectrum/text",
"@react-spectrum/textfield",
"@react-spectrum/theme-dark",
"@react-spectrum/theme-default",
"@react-spectrum/theme-light",
"@react-spectrum/tooltip",
"@react-spectrum/view",
"@react-spectrum/well",
"@spectrum-icons/illustrations",
"@spectrum-icons/ui",
"@spectrum-icons/workflow",
]);

module.exports = withTM({
module.exports = {
transpilePackages: [
"@adobe/react-spectrum",
"@react-spectrum/actiongroup",
"@react-spectrum/badge",
"@react-spectrum/breadcrumbs",
"@react-spectrum/button",
"@react-spectrum/buttongroup",
"@react-spectrum/calendar",
"@react-spectrum/checkbox",
"@react-spectrum/color",
"@react-spectrum/combobox",
"@react-spectrum/contextualhelp",
"@react-spectrum/datepicker",
"@react-spectrum/dialog",
"@react-spectrum/divider",
"@react-spectrum/dnd",
"@react-spectrum/form",
"@react-spectrum/icon",
"@react-spectrum/illustratedmessage",
"@react-spectrum/image",
"@react-spectrum/label",
"@react-spectrum/labeledvalue",
"@react-spectrum/layout",
"@react-spectrum/link",
"@react-spectrum/list",
"@react-spectrum/listbox",
"@react-spectrum/menu",
"@react-spectrum/meter",
"@react-spectrum/numberfield",
"@react-spectrum/overlays",
"@react-spectrum/picker",
"@react-spectrum/progress",
"@react-spectrum/provider",
"@react-spectrum/radio",
"@react-spectrum/slider",
"@react-spectrum/searchfield",
"@react-spectrum/statuslight",
"@react-spectrum/switch",
"@react-spectrum/table",
"@react-spectrum/tabs",
"@react-spectrum/text",
"@react-spectrum/textfield",
"@react-spectrum/theme-dark",
"@react-spectrum/theme-default",
"@react-spectrum/theme-light",
"@react-spectrum/tooltip",
"@react-spectrum/view",
"@react-spectrum/well",
"@spectrum-icons/illustrations",
"@spectrum-icons/ui",
"@spectrum-icons/workflow",
],
basePath:
process.env.VERDACCIO && process.env.CIRCLE_SHA1
? `/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/next`
: "",
});
};
5 changes: 2 additions & 3 deletions examples/rsp-next-ts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,15 @@
"@react-spectrum/color": "^3.0.0-beta.16",
"@spectrum-icons/illustrations": "^3.5.0",
"@spectrum-icons/workflow": "^4.0.3",
"next": "^12.3.1",
"next-transpile-modules": "^9.0.0",
"next": "^13.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^18.8.2",
"@types/react": "^18.0.21",
"eslint": "^8.24.0",
"eslint-config-next": "^12.3.1",
"eslint-config-next": "^13.1.1",
"typescript": "^4.8.4"
}
}
70 changes: 68 additions & 2 deletions packages/dev/docs/pages/react-spectrum/ssr.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ governing permissions and limitations under the License. */}
import {Layout} from '@react-spectrum/docs';
export default Layout;

import ChevronRight from '@spectrum-icons/workflow/ChevronRight';

---
category: Concepts
keywords: [ssr, server side rendering, spectrum, next.js, gatsby]
Expand Down Expand Up @@ -52,13 +54,75 @@ Finally, when using server side rendering, the `locale` prop should be set expli

[Next.js](https://nextjs.org) is a framework for building websites and web applications with React. It supports both server side rendering as well as static rendering. In addition to using an `SSRProvider`, a small amount of configuration is required to get React Spectrum’s CSS working with Next.js.

First, you’ll need to install an additional Next.js plugin:
Add the following to your `next.config.js` file. This will ensure that React Spectrum’s CSS is loaded properly by Next.js. Note that packages may need to be removed or added to the config below if using an older or newer version of React Spectrum.

```tsx
module.exports = {
transpilePackages: [
"@adobe/react-spectrum",
"@react-spectrum/actiongroup",
"@react-spectrum/badge",
"@react-spectrum/breadcrumbs",
"@react-spectrum/button",
"@react-spectrum/buttongroup",
"@react-spectrum/calendar",
"@react-spectrum/checkbox",
"@react-spectrum/color",
"@react-spectrum/combobox",
"@react-spectrum/contextualhelp",
"@react-spectrum/datepicker",
"@react-spectrum/dialog",
"@react-spectrum/divider",
"@react-spectrum/dnd",
"@react-spectrum/form",
"@react-spectrum/icon",
"@react-spectrum/illustratedmessage",
"@react-spectrum/image",
"@react-spectrum/label",
"@react-spectrum/labeledvalue",
"@react-spectrum/layout",
"@react-spectrum/link",
"@react-spectrum/list",
"@react-spectrum/listbox",
"@react-spectrum/menu",
"@react-spectrum/meter",
"@react-spectrum/numberfield",
"@react-spectrum/overlays",
"@react-spectrum/picker",
"@react-spectrum/progress",
"@react-spectrum/provider",
"@react-spectrum/radio",
"@react-spectrum/slider",
"@react-spectrum/searchfield",
"@react-spectrum/statuslight",
"@react-spectrum/switch",
"@react-spectrum/table",
"@react-spectrum/tabs",
"@react-spectrum/text",
"@react-spectrum/textfield",
"@react-spectrum/theme-dark",
"@react-spectrum/theme-default",
"@react-spectrum/theme-light",
"@react-spectrum/tooltip",
"@react-spectrum/view",
"@react-spectrum/well",
"@spectrum-icons/illustrations",
"@spectrum-icons/ui",
"@spectrum-icons/workflow",
]
};
```

<details>
<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> For Next.js 13.0.x and below</summary>

You’ll need to install an additional Next.js plugin:

```
yarn add next-transpile-modules
```

With this installed, add the following to your `next.config.js` file. This will ensure that React Spectrum’s CSS is loaded properly by Next.js. Note that packages may need to be removed or added to the config below if using an older or newer version of React Spectrum.
With this installed, add the following to your `next.config.js` file.

```tsx
const withTM = require("next-transpile-modules")([
Expand Down Expand Up @@ -117,6 +181,8 @@ module.exports = withTM({
});
```

</details>

## Gatsby

[Gatsby](https://www.gatsbyjs.com) is a static site generator built with React. Gatsby works out of the box with React Spectrum without any additional configuration. For an example of a working Gatsby site using React Spectrum, see [this repo](https://github.com/devongovett/rsp-gatsby).