Update SSR docs for Next.js 11 #2215
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,30 +52,63 @@ 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: | ||
|
|
||
| ``` | ||
| 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. | ||
|
|
||
| ```tsx | ||
| const withTM = require("next-transpile-modules")([ | ||
| "@adobe/react-spectrum", | ||
| "@react-spectrum/actiongroup", | ||
| "@react-spectrum/breadcrumbs", | ||
| "@react-spectrum/button", | ||
| "@react-spectrum/buttongroup", | ||
| "@react-spectrum/checkbox", | ||
| "@react-spectrum/combobox", | ||
| "@react-spectrum/dialog", | ||
| "@react-spectrum/divider", | ||
| "@react-spectrum/form", | ||
| "@react-spectrum/icon", | ||
| "@react-spectrum/illustratedmessage", | ||
| "@react-spectrum/image", | ||
| "@react-spectrum/label", | ||
| "@react-spectrum/layout", | ||
| "@react-spectrum/link", | ||
| "@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/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/ui", | ||
| "@spectrum-icons/workflow" | ||
| ]); | ||
|
|
||
| module.exports = withTM({ | ||
| // Your Next.js configuration | ||
| }); | ||
| ``` | ||
|
|
||
|
Comment on lines
-77
to
-78
There was a problem hiding this comment. No need to handle for this PR, but would be good to track somewhere that we should update/create a new example repo for a example Next.js app There was a problem hiding this comment. Should we update my app? I accept PRs :D There was a problem hiding this comment. Even better. I'll make one and we can keep this in. There was a problem hiding this comment. @devongovett PR is @ devongovett/rsp-next#7 |
||
| ## 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). | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just for my own knowledge: the star patterns don't work any more here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct; it seems like it is not possible since v5 of this plugin (Source). I believe these docs were written at v4. There are some alternate solutions in the thread, so if people feel strongly about implementing one of those, that could be an option.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You might want to explain what is going on here. Is this just a list of everything you use in your project? Would you really have the monopackage and a bunch of the individual ones too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea, I'll add that. I wasn't able to get individual packages working. It looks like it requires every one to be included, as well as the monopackage.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Leaving as is for now, as to not cause extra confusion. We can follow up if we manage to get individual packages working.