diff --git a/examples/rsp-next-ts/next.config.js b/examples/rsp-next-ts/next.config.js index a580f9c489e..3bc91f3b24d 100644 --- a/examples/rsp-next-ts/next.config.js +++ b/examples/rsp-next-ts/next.config.js @@ -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` : "", -}); +}; diff --git a/examples/rsp-next-ts/package.json b/examples/rsp-next-ts/package.json index 4a023853b5d..d1526ea5424 100644 --- a/examples/rsp-next-ts/package.json +++ b/examples/rsp-next-ts/package.json @@ -15,8 +15,7 @@ "@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" }, @@ -24,7 +23,7 @@ "@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" } } diff --git a/packages/dev/docs/pages/react-spectrum/ssr.mdx b/packages/dev/docs/pages/react-spectrum/ssr.mdx index 7df26a60773..2bfb754872e 100644 --- a/packages/dev/docs/pages/react-spectrum/ssr.mdx +++ b/packages/dev/docs/pages/react-spectrum/ssr.mdx @@ -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] @@ -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", + ] +}; +``` + +
+ For Next.js 13.0.x and below + +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")([ @@ -117,6 +181,8 @@ module.exports = withTM({ }); ``` +
+ ## 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).