{"id":19293089,"url":"https://github.com/leva2020/quot-react","last_synced_at":"2025-11-15T04:20:05.026Z","repository":{"id":120024969,"uuid":"155256369","full_name":"leva2020/quot-react","owner":"leva2020","description":null,"archived":false,"fork":false,"pushed_at":"2018-10-29T17:54:58.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T20:40:37.214Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leva2020.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-29T17:53:19.000Z","updated_at":"2018-10-29T17:55:00.000Z","dependencies_parsed_at":"2023-06-14T18:30:48.920Z","dependency_job_id":null,"html_url":"https://github.com/leva2020/quot-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leva2020%2Fquot-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leva2020%2Fquot-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leva2020%2Fquot-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leva2020%2Fquot-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leva2020","download_url":"https://codeload.github.com/leva2020/quot-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240396503,"owners_count":19794694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T22:34:01.964Z","updated_at":"2025-11-15T04:19:59.999Z","avatar_url":"https://github.com/leva2020.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app).\n\nFind the most recent version of this guide at [here](https://github.com/segmentio/create-next-app/blob/master/lib/templates/default/README.md). And check out [Next.js repo](https://github.com/zeit/next.js) for the most up-to-date info.\n\n## Table of Contents\n\n- [Questions? Feedback?](#questions-feedback)\n- [Folder Structure](#folder-structure)\n- [Available Scripts](#available-scripts)\n  - [npm run dev](#npm-run-dev)\n  - [npm run build](#npm-run-build)\n  - [npm run start](#npm-run-start)\n- [Using CSS](#using-css)\n- [Adding Components](#adding-components)\n- [Fetching Data](#fetching-data)\n- [Custom Server](#custom-server)\n- [Syntax Highlighting](#syntax-highlighting)\n- [Using the `static` Folder](#using-the-static-folder)\n- [Deploy to Now](#deploy-to-now)\n- [Something Missing?](#something-missing)\n\n## Questions? Feedback?\n\nCheck out [Next.js FAQ \u0026 docs](https://github.com/zeit/next.js#faq) or [let us know](https://github.com/segmentio/create-next-app/issues) your feedback.\n\n## Folder Structure\n\nAfter creating an app, it should look something like:\n\n```\n.\n├── README.md\n├── components\n│   ├── head.js\n│   └── nav.js\n├── next.config.js\n├── node_modules\n│   ├── [...]\n├── package.json\n├── pages\n│   └── index.js\n├── static\n│   └── favicon.ico\n└── yarn.lock\n```\n\nRouting in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and\n`./pages/about.js` would map to `/about`.\n\nThe `./static` directory maps to `/static` in the `next` server, so you can put all your\nother static resources like images or compiled CSS in there.\n\nOut of the box, we get:\n\n- Automatic transpilation and bundling (with webpack and babel)\n- Hot code reloading\n- Server rendering and indexing of `./pages`\n- Static file serving. `./static/` is mapped to `/static/`\n\nRead more about [Next's Routing](https://github.com/zeit/next.js#routing)\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm run dev`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any errors in the console.\n\n### `npm run build`\n\nBuilds the app for production to the `.next` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\n### `npm run start`\n\nStarts the application in production mode.\nThe application should be compiled with \\`next build\\` first.\n\nSee the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.\n\n## Using CSS\n\n[`styled-jsx`](https://github.com/zeit/styled-jsx) is bundled with next to provide support for isolated scoped CSS. The aim is to support \"shadow CSS\" resembling of Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).\n\n```jsx\nexport default () =\u003e (\n  \u003cdiv\u003e\n    Hello world\n    \u003cp\u003escoped!\u003c/p\u003e\n    \u003cstyle jsx\u003e{`\n      p {\n        color: blue;\n      }\n      div {\n        background: red;\n      }\n      @media (max-width: 600px) {\n        div {\n          background: blue;\n        }\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\nRead more about [Next's CSS features](https://github.com/zeit/next.js#css).\n\n## Adding Components\n\nWe recommend keeping React components in `./components` and they should look like:\n\n### `./components/simple.js`\n\n```jsx\nconst Simple = () =\u003e \u003cdiv\u003eSimple Component\u003c/div\u003e\n\nexport default Simple // don't forget to export default!\n```\n\n### `./components/complex.js`\n\n```jsx\nimport { Component } from 'react'\n\nclass Complex extends Component {\n  state = {\n    text: 'World'\n  }\n\n  render() {\n    const { text } = this.state\n    return \u003cdiv\u003eHello {text}\u003c/div\u003e\n  }\n}\n\nexport default Complex // don't forget to export default!\n```\n\n## Fetching Data\n\nYou can fetch data in `pages` components using `getInitialProps` like this:\n\n### `./pages/stars.js`\n\n```jsx\nconst Page = props =\u003e \u003cdiv\u003eNext stars: {props.stars}\u003c/div\u003e\n\nPage.getInitialProps = async ({ req }) =\u003e {\n  const res = await fetch('https://api.github.com/repos/zeit/next.js')\n  const json = await res.json()\n  const stars = json.stargazers_count\n  return { stars }\n}\n\nexport default Page\n```\n\nFor the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `Link` component or using the routing APIs.\n\n_Note: `getInitialProps` can **not** be used in children components. Only in `pages`._\n\nRead more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle)\n\n## Custom Server\n\nWant to start a new app with a custom server? Run `create-next-app --example customer-server custom-app`\n\nTypically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc\n\nThis example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`:\n\n```jsx\nconst { createServer } = require('http')\nconst { parse } = require('url')\nconst next = require('next')\n\nconst dev = process.env.NODE_ENV !== 'production'\nconst app = next({ dev })\nconst handle = app.getRequestHandler()\n\napp.prepare().then(() =\u003e {\n  createServer((req, res) =\u003e {\n    // Be sure to pass `true` as the second argument to `url.parse`.\n    // This tells it to parse the query portion of the URL.\n    const parsedUrl = parse(req.url, true)\n    const { pathname, query } = parsedUrl\n\n    if (pathname === '/a') {\n      app.render(req, res, '/b', query)\n    } else if (pathname === '/b') {\n      app.render(req, res, '/a', query)\n    } else {\n      handle(req, res, parsedUrl)\n    }\n  }).listen(3000, err =\u003e {\n    if (err) throw err\n    console.log('\u003e Ready on http://localhost:3000')\n  })\n})\n```\n\nThen, change your `start` script to `NODE_ENV=production node server.js`.\n\nRead more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing)\n\n## Syntax Highlighting\n\nTo configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.\n\n## Deploy to Now\n\n[now](https://zeit.co/now) offers a zero-configuration single-command deployment.\n\n1.  Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`.\n\n2.  Run `now` from your project directory. You will see a **now.sh** URL in your output like this:\n\n    ```\n    \u003e Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)\n    ```\n\n    Paste that URL into your browser when the build is complete, and you will see your deployed app.\n\nYou can find more details about [`now` here](https://zeit.co/now).\n\n## Something Missing?\n\nIf you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/segmentio/create-next-app/issues) or [contribute some!](https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleva2020%2Fquot-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleva2020%2Fquot-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleva2020%2Fquot-react/lists"}