Skip to content

Commit

Permalink
examples: update with-styled-components README (vercel#73729)
Browse files Browse the repository at this point in the history
## What?

Delete Notes on `next/link` in the
[`with-styled-components`](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
example.

## Why?


[`as`](https://github.com/vercel/next.js/blob/v9.5.2/docs/api-reference/next/link.md#dynamic-routes)
prop of `next/link` is no longer required at
[v10.0.0](https://nextjs.org/docs/app/api-reference/components/link#version-history)
Next.js.

Therefore, the
[as](https://styled-components.com/docs/api#as-polymorphic-prop) prop
provided by `styled` doesn't collide with the `next/Link`'s `as` prop.

CC: @samcx 

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

Co-authored-by: Sam Ko <[email protected]>
  • Loading branch information
JamBalaya56562 and samcx authored Dec 17, 2024
1 parent d3bb11e commit d0e4aa0
Showing 1 changed file with 0 additions and 51 deletions.
51 changes: 0 additions & 51 deletions examples/with-styled-components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,54 +33,3 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
### Try it on CodeSandbox

[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components)

### Notes

When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) 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](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link.

<details>
<summary>Click to expand workaround example</summary>
<br />

**components/StyledLink.js**

```javascript
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**

```javascript
import StyledLink from "../components/StyledLink";

export default () => (
<StyledLink href="/post/[pid]" forwardedAs="/post/abc">
First post
</StyledLink>
);
```

</details>

0 comments on commit d0e4aa0

Please sign in to comment.