-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
539568a
commit e8440a1
Showing
1 changed file
with
48 additions
and
61 deletions.
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 |
|---|---|---|
| @@ -1,84 +1,71 @@ | ||
| # Example app with styled-components | ||
| <h1 align="center">TCC Quiz</h1> | ||
|
|
||
| This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/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](https://github.com/styled-components/styled-components). | ||
|
|
||
| For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [`<App>`](https://nextjs.org/docs/advanced-features/custom-app) component. | ||
| <p align="center"> | ||
| <img src="https://res.cloudinary.com/dhmkfekt2/image/upload/v1647474765/tcc_gif_ur8x1z.gif" /> | ||
| </p> | ||
|
|
||
| ## Preview | ||
|
|
||
| Preview the example live on [StackBlitz](http:https://stackblitz.com/): | ||
| <p align="center"> | ||
| <a href="#sobre">About</a> • | ||
| <a href="#tecnologias">Technologies</a> • | ||
| <a href="#features">Features</a> • | ||
| <a href="#pre">Requirements</a> • | ||
| <a href="#autor">Author</a> | ||
| </p> | ||
|
|
||
| [](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components) | ||
| ## About :book: | ||
|
|
||
| ## Deploy your own | ||
| Using the React library, the NextJs framework and gamification concepts to produce a web application that follows good development practices, this application is a question and answer game, to exercise and fix knowledge, rewarding the user as he answers the questions with experience. for level advancement and highlights to display on your main page, thus providing an environment that conforms to gamification conventions, creating an immersive atmosphere for greater engagement in studies. | ||
|
|
||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
| ## Technologies :rocket: | ||
|
|
||
| [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components&project-name=with-styled-components&repository-name=with-styled-components) | ||
| [HTML/CSS] | ||
|
|
||
| ## How to use | ||
| [Javascript] | ||
|
|
||
| Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
| [React][react] | ||
|
|
||
| ```bash | ||
| 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](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
|
||
| ### Try it on CodeSandbox | ||
| [NextJS][nextjs] | ||
|
|
||
| [Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components) | ||
|
|
||
| ### Notes | ||
| ## Features | ||
|
|
||
| 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. | ||
| - [x] ✔ Information persistence | ||
| - [x] ✔ Login with social network | ||
| - [x] ✔ Level advancement by answering questions | ||
| - [x] ✔ Title reward as you level up | ||
|
|
||
| <details> | ||
| <summary>Click to expand workaround example</summary> | ||
| <br /> | ||
|
|
||
|
|
||
| **components/StyledLink.js** | ||
| <hr> | ||
| <p id="pre"> | ||
| Before you begin, you will need to have the following tools installed on your machine: | ||
|
|
||
| ```javascript | ||
| import Link from 'next/link' | ||
| import styled from 'styled-components' | ||
| [Git](https://git-scm.com) | ||
| , [Node.js](https://nodejs.org/en/). Also, it’s good to have an editor to work with the code like [VSCode](https://code.visualstudio.com/) | ||
| </p> | ||
|
|
||
| const StyledLink = ({ as, children, className, href }) => ( | ||
| <Link href={href} as={as} passHref> | ||
| <a className={className}>{children}</a> | ||
| </Link> | ||
| ) | ||
| ### 🎲 Running the REACT application | ||
|
|
||
| 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; | ||
| } | ||
| ` | ||
| ```bash | ||
| # Clone this repository | ||
| $ git clone <https://github.com/williamdlm/TCC> | ||
| ``` | ||
|
|
||
| **pages/index.js** | ||
|
|
||
| ```javascript | ||
| import StyledLink from '../components/StyledLink' | ||
|
|
||
| export default () => ( | ||
| <StyledLink href="/post/[pid]" forwardedAs="/post/abc"> | ||
| First post | ||
| </StyledLink> | ||
| ) | ||
| ```bash | ||
| # Access the project folder in the / cmd terminal | ||
| $ cd TCC | ||
| ``` | ||
| ```bash | ||
| # Install dependencies | ||
| $ yarn | ||
| ``` | ||
| ```bash | ||
| # Run the application in development mode | ||
| $ yarn start | ||
| ``` | ||
|
|
||
|
|
||
| </details> | ||
| [react]:https://pt-br.reactjs.org | ||
| [nextjs]:https://nextjs.org/ |
e8440a1There 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.
Successfully deployed to the following URLs: