b579a35e83
* rename example with-styled-components to with-styled-components-babel * update with-styled-components references * update docs on react hydratation erros for styled components * clone with-styled-components-babel without babel config * add styledComponents to compiler options in next.config * replace babel dependency with Next.js SWC compiler * upgrade example typescript version example with-typescript-styled-components had a typescript dependency lower than the recommended version. Upgraded from 4.2.4 to 4.5.5. * Apply suggestions from code review * update readme for with-styled-components-babel remove Notes section since it describes a workaround which is no longer required to work with `next/link`. Co-authored-by: Lee Robinson <me@leerob.io> Co-authored-by: Balázs Orbán <info@balazsorban.com> |
||
---|---|---|
.. | ||
pages | ||
.gitignore | ||
next.config.js | ||
package.json | ||
README.md |
Example app with styled-components
This example features how you use a different styling solution than styled-jsx that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using styled-components.
This example uses the Rust-based SWC in Next.js for better performance than Babel.
Currently, only the ssr
and displayName
transforms have been implemented. These two transforms are the main requirement for using styled-components
in Next.js.
Preview
Preview the example live on StackBlitz:
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-styled-components with-styled-components-app
# or
yarn create next-app --example with-styled-components with-styled-components-app
Deploy it to the cloud with Vercel (Documentation).
Try it on CodeSandbox
Open this example on CodeSandbox
Notes
When wrapping a Link from next/link
within a styled-component, the as prop provided by styled
will collide with the Link's as
prop and cause styled-components to throw an Invalid tag
error. To avoid this, you can either use the recommended forwardedAs prop from styled-components or use a different named prop to pass to a styled
Link.
Click to expand workaround example
components/StyledLink.js
import Link from 'next/link'
import styled from 'styled-components'
const StyledLink = ({ as, children, className, href }) => (
<Link href={href} as={as} passHref>
<a className={className}>{children}</a>
</Link>
)
export default styled(StyledLink)`
color: #0075e0;
text-decoration: none;
transition: all 0.2s ease-in-out;
&:hover {
color: #40a9ff;
}
&:focus {
color: #40a9ff;
outline: none;
border: 0;
}
`
pages/index.js
import StyledLink from '../components/StyledLink'
export default () => (
<StyledLink href="/post/[pid]" forwardedAs="/post/abc">
First post
</StyledLink>
)