- Notifications
You must be signed in to change notification settings - Fork0
🤿Alura Imersão React_ (NextJs) 3ª Edição.
marcosbarker/alura.imersaoReact-Alurakut
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This example features how you use a different styling solution thanstyled-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 usingstyled-components.
For this purpose we are extending the<Document /> and injecting the server side rendered styles into the<head>, and also adding thebabel-plugin-styled-components (which is required for server side rendering). Additionally we set up a globaltheme for styled-components using NextJS custom<App> component.
code:yarn create next-app --example with-styled-components
Preview the example live onStackBlitz:
Deploy the example usingVercel:
Executecreate-next-app withnpm orYarn to bootstrap the example:
npx create-next-app --example with-styled-components with-styled-components-app# oryarn create next-app --example with-styled-components with-styled-components-appDeploy it to the cloud withVercel (Documentation).
Open this example on CodeSandbox
When wrapping aLink fromnext/link within a styled-component, theas prop provided bystyled will collide with the Link'sas prop and cause styled-components to throw anInvalid tag error. To avoid this, you can either use the recommendedforwardedAs prop from styled-components or use a different named prop to pass to astyled Link.
Click to expand workaround example
components/StyledLink.js
importLinkfrom'next/link'importstyledfrom'styled-components'constStyledLink=({ as, children, className, href})=>(<Linkhref={href}as={as}passHref><aclassName={className}>{children}</a></Link>)exportdefaultstyled(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
importStyledLinkfrom'../components/StyledLink'exportdefault()=>(<StyledLinkhref="/post/[pid]"forwardedAs="/post/abc"> First post</StyledLink>)
About
🤿Alura Imersão React_ (NextJs) 3ª Edição.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.