{"id":15505262,"url":"https://github.com/lachlanjc/next-theme-starter","last_synced_at":"2026-02-25T16:01:08.826Z","repository":{"id":38361253,"uuid":"335089083","full_name":"lachlanjc/next-theme-starter","owner":"lachlanjc","description":"Batteries-included Next.js starter for Theme UI \u0026 MDX","archived":false,"fork":false,"pushed_at":"2023-01-31T07:46:26.000Z","size":482,"stargazers_count":41,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-06T11:40:02.589Z","etag":null,"topics":["mdx","nextjs","nextjs-starter","theme-ui"],"latest_commit_sha":null,"homepage":"https://next-theme-starter.vercel.app","language":"TypeScript","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/lachlanjc.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":"2021-02-01T21:28:40.000Z","updated_at":"2024-12-12T19:43:55.000Z","dependencies_parsed_at":"2023-02-12T22:00:42.419Z","dependency_job_id":null,"html_url":"https://github.com/lachlanjc/next-theme-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/lachlanjc/next-theme-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lachlanjc%2Fnext-theme-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lachlanjc%2Fnext-theme-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lachlanjc%2Fnext-theme-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lachlanjc%2Fnext-theme-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lachlanjc","download_url":"https://codeload.github.com/lachlanjc/next-theme-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lachlanjc%2Fnext-theme-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29829408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T15:41:19.027Z","status":"ssl_error","status_checked_at":"2026-02-25T15:40:47.150Z","response_time":61,"last_error":"SSL_read: 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":["mdx","nextjs","nextjs-starter","theme-ui"],"created_at":"2024-10-02T09:22:13.758Z","updated_at":"2026-02-25T16:01:08.805Z","avatar_url":"https://github.com/lachlanjc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Theme Starter\n\nA sample [Next.js] (v13) project for getting started with [Theme UI], [MDX] (v2), \u0026 TypeScript.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Flachlanjc%2Fnext-theme-starter\u0026repository-name=next-theme-starter)\n\n[next.js]: https://nextjs.org\n[mdx]: https://mdxjs.com\n[theme ui]: https://theme-ui.com\n\n## Usage\n\n1. Import this repo to your coding environment of choice. [Download a zip](https://github.com/lachlanjc/next-theme-starter/archive/refs/heads/main.zip), use Create Next App (`yarn create next-app -e https://github.com/lachlanjc/next-theme-starter`), or use the GitHub import on CodeSandbox/repl.it/Glitch/etc.\n2. `pnpm` to install dependencies.\n3. `pnpm dev` to start your server.\n4. Start adding your own pages \u0026 components in their respective directories.\n\n## Configuration\n\n### Theme switcher\n\nThere’s an included example theme switcher component at `components/color-switcher.tsx`,\nwhich is included on every page through its inclusion in `pages/_app.tsx`.\nFeel free to change/remove it.\n\n### Custom theme\n\nBy default, a theme inspired by the [Hack Club Theme](https://theme.hackclub.com) is included.\nTo edit the theme, head to `lib/theme.ts`.\n\n### Running at another port\n\nSuper easy: `pnpm dev -p 5000`\n\n### Dependency updates\n\nThe included Dependabot configuration file means you’ll automatically get PRs\nevery Monday with dependency updates. Delete `.github/dependabot.yml` to\ndisable.\n\n### Meta tags\n\nThis template includes a `Meta` component for adding full meta tags.\nTo set the defaults, open `components/meta.tsx` \u0026 change the default props.\n\nIt’s included in `pages/_app.tsx` so all pages have the default tags without\nanything per-page, but due to the `key`s included on each tag, if you render\nthe component multiple times (such as once in `_app` \u0026 again on an invidual page),\nthe last instance of each tag will be used, with duplicates.\n\nIf you don’t set a `description` or `image`, the relevant tags for those fields\nwill be omitted.\n\nHere’s how you use `Meta` on a page:\n\n```js\nimport Meta from '../components/meta'\n\nconst AboutPage = () =\u003e (\n  \u003c\u003e\n    \u003cMeta\n      title=\"About\" // page title\n      description=\"About our nonprofit.\" // page description\n      image=\"https://yourdomain.com/special-card.png\" // large summary card image URL\n    /\u003e\n    {/* … */}\n  \u003c/\u003e\n)\n\nexport default AboutPage\n```\n\n(The default props are included on the component instead of `_app.tsx` so you\ndon’t have to re-include all the props on each page.)\n\nYou can also pass children to `Meta` to quickly include custom tags inside the\n[Next.js `Head`](https://nextjs.org/docs/api-reference/next/head).\n\n### Icons\n\nNo iconsets are included with this starter, but a few I recommend:\n\n- [react-bootstrap-icons](https://github.com/ismamz/react-bootstrap-icons)\n- [react-ionicons](https://github.com/zamarrowski/react-ionicons)\n- [react-feather](https://github.com/feathericons/react-feather)\n- [@geist-ui/react-icons](https://github.com/geist-org/react-icons)\n- [supercons](https://github.com/lachlanjc/supercons)\n\n### Adding analytics\n\nI recommend [Fathom Analytics](https://usefathom.com/ref/NXBJA2) or\n[Plausible.io](https://plausible.io)\nfor simple, privacy-focused analytics.\n\n\u003cdetails\u003e\n\u003csummary\u003eExample \u003ccode\u003e_app.tsx\u003c/code\u003e with Fathom (requires \u003ccode\u003efathom-client\u003c/code\u003e)\u003c/summary\u003e\n\n```js\nimport React, { useEffect } from 'react'\nimport type { AppProps } from 'next/app'\nimport { useRouter } from 'next/router'\nimport Head from 'next/head'\n\nimport Meta from '#/components/meta'\nimport theme from '#/lib/theme'\nimport { ThemeProvider } from 'theme-ui'\nimport * as Fathom from 'fathom-client'\n\nconst App = ({ Component, pageProps }: AppProps) =\u003e {\n  const router = useRouter()\n\n  useEffect(() =\u003e {\n    Fathom.load('YOURCODE', {\n      includedDomains: ['YOURDOMAIN.com'],\n      url: 'https://YOURSUB.YOURDOMAIN.com/script.js', // optional\n    })\n    const onRouteChangeComplete = () =\u003e Fathom.trackPageview()\n    router.events.on('routeChangeComplete', onRouteChangeComplete)\n    return () =\u003e {\n      router.events.off('routeChangeComplete', onRouteChangeComplete)\n    }\n  }, [])\n\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      \u003cMeta /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ThemeProvider\u003e\n  )\n}\n\nexport default App\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003eExample \u003ccode\u003e_app.tsx\u003c/code\u003e with Plausible (requires \u003ccode\u003enext-plausible\u003c/code\u003e)\u003c/summary\u003e\n\n```js\nimport React from 'react'\nimport type { AppProps } from 'next/app'\nimport Head from 'next/head'\n\nimport PlausibleProvider from 'next-plausible'\nimport theme from '#/lib/theme'\nimport { ThemeProvider } from 'theme-ui'\nimport Meta from '#/components/meta'\n\nconst App = ({ Component, pageProps }: AppProps) =\u003e {\n  return (\n    \u003cPlausibleProvider domain=\"YOURDOMAIN.com\"\u003e\n      \u003cThemeProvider theme={theme}\u003e\n        \u003cMeta /\u003e\n        \u003cComponent {...pageProps} /\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/PlausibleProvider\u003e\n  )\n}\n\nexport default App\n```\n\n\u003c/details\u003e\n\n## Deployment\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Flachlanjc%2Fnext-theme-starter\u0026repo-name=next-theme-project)\n\nI highly recommend using [Vercel](https://vercel.com) for deployment. It requires no\nconfiguration, is totally free for personal projects, and supports all the features\nof Next.js with the best performance. Refer to [their documentation](https://vercel.com/docs#deploy-an-existing-project)\nfor more details.\n\nAlternatively, you can deploy your site on [Netlify](https://netlify.com) (also free); [Netlify’s documentation is here](https://docs.netlify.com/configure-builds/common-configurations/next-js/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flachlanjc%2Fnext-theme-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flachlanjc%2Fnext-theme-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flachlanjc%2Fnext-theme-starter/lists"}