{"id":17652545,"url":"https://github.com/oscarvz/nextjs-starter","last_synced_at":"2026-01-20T20:32:59.445Z","repository":{"id":37798982,"uuid":"326787128","full_name":"oscarvz/nextjs-starter","owner":"oscarvz","description":"Next.js starter with TS \u0026 styled-components to get going fast!","archived":false,"fork":false,"pushed_at":"2023-03-07T15:59:28.000Z","size":946,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T03:48:38.642Z","etag":null,"topics":["next","nextjs","prettier","react","reactjs","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oscarvz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-01-04T19:27:35.000Z","updated_at":"2023-03-08T20:51:40.000Z","dependencies_parsed_at":"2024-12-23T17:34:24.034Z","dependency_job_id":null,"html_url":"https://github.com/oscarvz/nextjs-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/oscarvz/nextjs-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarvz%2Fnextjs-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarvz%2Fnextjs-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarvz%2Fnextjs-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarvz%2Fnextjs-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oscarvz","download_url":"https://codeload.github.com/oscarvz/nextjs-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarvz%2Fnextjs-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28612947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["next","nextjs","prettier","react","reactjs","styled-components","typescript"],"created_at":"2024-10-23T11:47:19.754Z","updated_at":"2026-01-20T20:32:59.426Z","avatar_url":"https://github.com/oscarvz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js starter\n\nWhen I start a new project, [Next.js](https://nextjs.org/) is my preferred framework to get started with. It comes with SSG \u0026 SSR and other optimisations right out of the box and allows you to set up \u0026 deploy a product fast.\n\nThis repo houses a [bootstrapped Next.js project](https://nextjs.org/docs#setup) with TypeScript as the main language and some preferred libraries so I can get started on new projects immediately!\n\n\u003e For demonstration purposes I added a few components with basic styling to play around with.\n\n#### A few neat things to point out:\n- Added support for SSR CSS!\n- The `styled-components` theme is typed so your text editor/IDE will give you suggestions;\n- The theme currently generates CSS variables so playing around with different color options from your browser's dev tools is easy!\n\n#### Features I'll add later:\n- Dark mode\n- Optional inclusion of the [`framer-motion`](https://github.com/framer/motion) library\n\n---\n\n## Getting started\nYou can clone this repo or use Github's '[use this template](https://github.com/oscarvz/nextjs-starter/generate)' function (the green button - it allows you to create a new repo with this code where this Git history is removed).\n\nBefore running below commands, make sure to create a `.env.local` file and add `BASE_URL=http://localhost:3000`.\n\n### Using yarn:\n```\nyarn;\nyarn dev\n```\n\n### Using NPM:\n```\nnpm install;\nnpm run dev\n```\n---\n\n## Added tech \u0026 libraries\n\n### TypeScript\n\nSince I started working with TypeScript in bigger projects I've come to realise I don't want to write vanilla JS anymore in bigger scoped projects.\nA few points that made me stick to TS:\n\n- Finding issues/bugs: the compiler points out what \u0026 where the problem is - before you're able to deploy anything;\n- Working together: there's less backtracing of code and reading code is easier;\n- Development process: it forces you to think differently about your code (\"What the heck am I _actually_ doing?\");\n- Code completion \u0026 suggestions in text editors \u0026 IDE's!\n\n[_website_](https://typescriptlang.org) | [_github_](https://github.com/Microsoft/TypeScript) | [_npm_](https://npmjs.com/package/typescript)\n\n### Styled Components\n\nStyling can easily become cumbersome when working with React. A library like `styled-components` slots perfectly into the React way of 'component thinking'. It allows you to keep the styling separated from the business logic in your components, making sure your components don't get cluttered and stay easier to read.\n\nBy making use of `styled-components` you introduce a tiny bit of JS overhead to your project, but will introduce a bunch of benefits:\n\n- Theming: set up a global theme once and all your styled components can access it anywhere within the component tree;\n- Modernising: scoped CSS per component, extending components;\n- Optimisations: CSS gets injected only where it's needed. No more bulky CSS files!\n\n[_website_](https://styled-components.com) | [_github_](https://github.com/styled-components/styled-components) | [_npm_](https://npmjs.com/package/styled-components)\n\n### Prettier\n\n_How_ you format code can be a personal preference and result in conflicts working with others; this problem is solved by making use of an opiniated formatting library like Prettier. It takes away the hassle of formatting your files manually by running the format command or [use a plugin](https://prettier.io/docs/en/editors.html) in your favorite IDE.\n\n[_website_](https://prettier.io) | [_github_](https://github.com/prettier/prettier) | [_npm_](https://npmjs.com/package/prettier)\n\n---\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarvz%2Fnextjs-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foscarvz%2Fnextjs-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarvz%2Fnextjs-starter/lists"}