{"id":21428277,"url":"https://github.com/selcold/scpay","last_synced_at":"2025-03-16T21:25:28.932Z","repository":{"id":262549701,"uuid":"812950880","full_name":"selcold/scpay","owner":"selcold","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-21T14:19:54.000Z","size":2307,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T07:48:28.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://scpay-sxnu.vercel.app","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/selcold.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-10T08:10:05.000Z","updated_at":"2024-11-21T14:19:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"ddc6289b-6bb1-49d4-8b95-4738b9ab6535","html_url":"https://github.com/selcold/scpay","commit_stats":null,"previous_names":["selcold/scpay"],"tags_count":0,"template":false,"template_full_name":"toakiryu/repository-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selcold%2Fscpay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selcold%2Fscpay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selcold%2Fscpay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selcold%2Fscpay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selcold","download_url":"https://codeload.github.com/selcold/scpay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243934248,"owners_count":20371148,"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-22T22:12:20.800Z","updated_at":"2025-03-16T21:25:28.911Z","avatar_url":"https://github.com/selcold.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nextjs-rich-tpl.vercel.app/\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_dark_background.png\"\u003e\n      \u003cimg src=\"https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_light_background.png\" height=\"128\"\u003e\n    \u003c/picture\u003e\n    \u003ch1 align=\"center\"\u003eNext.js Rich Template\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"Vercel logo\" href=\"https://vercel.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/MADE%20BY%20Vercel-000000.svg?style=for-the-badge\u0026logo=Vercel\u0026labelColor=000\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/next/\"\u003e\n    \u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/next?style=for-the-badge\u0026label=NPM\u0026labelColor=black\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://github.com/Fun117/nextjs-rich-tpl/blob/main/LICENSE.txt\"\u003e\n    \u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/Fun117/nextjs-rich-tpl?style=for-the-badge\u0026labelColor=000000\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"README - English\" href=\"https://github.com/Fun117/nextjs-rich-tpl/blob/main/README/en.md\"\u003e\n    \u003cimg alt=\"README - English\" src=\"https://img.shields.io/badge/English-blue?style=for-the-badge\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"README - 日本語\" href=\"https://github.com/Fun117/nextjs-rich-tpl/blob/main/README/ja.md\"\u003e\n    \u003cimg alt=\"README - 日本語\" src=\"https://img.shields.io/badge/日本語-blue?style=for-the-badge\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Release version\" src=\"https://img.shields.io/github/v/release/fun117/nextjs-rich-tpl?style=social\"\u003e\n  \u003cimg alt=\"Commit activity\" src=\"https://img.shields.io/github/commit-activity/t/fun117/nextjs-rich-tpl?style=social\"\u003e\n  \u003cimg alt=\"Last commit\" src=\"https://img.shields.io/github/last-commit/fun117/nextjs-rich-tpl?style=social\"\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Desktop light image\" src=\"https://github.com/Fun117/nextjs-rich-tpl/blob/main/public/image/upload/preview/en-light-fullscreen.png\"\u003e\n  \u003cimg alt=\"Desktop dark image\" src=\"https://github.com/Fun117/nextjs-rich-tpl/blob/main/public/image/upload/preview/en-dark-fullscreen.png\"\u003e\n\u003c/p\u003e\n\n# Next.js Rich Template\n\nThis project provides a robust starting point for building modern web applications using Next.js. It includes pre-configured localization support, theme toggling, and various other features to streamline development.\n\n## Key Features\n\n- **Theme Switching**: Supports both light and dark modes using `next-themes`.\n- **i18n (Internationalization)**: Multi-language support using `next-intl`.\n- **Sitemap**: Automatically generated for improved SEO.\n- **Responsive Design**: Built with Tailwind CSS to ensure responsiveness across devices.\n- **Optimized Performance**: Leveraging modern web standards for enhanced performance.\n\n## Getting Started\n\nTo begin using this template, follow these steps:\n\n1. Clone the repository.\n2. Install the dependencies: `npm install` or `yarn install`.\n3. Start the development server: `npm run dev` or `yarn dev`.\n\n## Project Overview\n\nSee a live preview of this template [here](https://nextjs-rich-tpl.vercel.app).\n\n## Deploy Your Own\n\nYou can deploy the template on Vercel or preview it with StackBlitz:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Fun117/nextjs-rich-tpl/tree/main/examples/app/with-i18n-routing\u0026project-name=nextjs-rich-tpl\u0026repository-name=nextjs-rich-tpl)\n\n## How to Use\n\nTo bootstrap the project, clone the repository:\n\n```bash\nnpx create-next-app -e nextjs-rich-tpl\n```\n\nDeploy to the cloud using [Vercel](https://vercel.com/new?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) (see the official [documentation](https://nextjs.org/docs/deployment)).\n\n# Contributing\n\nWe welcome contributions to enhance the documentation or the project itself. Contributors will be acknowledged in this README. Please check our [GitHub repository](https://github.com/fun117/nextjs-rich-tpl) for more details on how to contribute.\n\n# Acknowledgments\n\nSpecial thanks to the Next.js community and open-source projects that inspired and supported this template.\n\n# Contact\n\nFor questions or contributions, please reach out via the [this site](https://fun117.dev/en/contacts).\n\n---\n\n# Documentation\n\n### 1. `richtpl.tsx` Setup Guide\n\n1. **Place `richtpl.tsx` at the root of your project**\n\nPlace the template configuration file `richtpl.tsx` in the root of your project. This file configures the internationalization and theme settings of the site.\n\n```typescript\nexport default {\n  title: \"My Project\",\n  tagline: \"The best project ever!\",\n  url: \"https://myproject.com\",\n  organizationName: \"MyOrganization\",\n  projectName: \"my-project\",\n  i18n: {\n    defaultLocale: \"en\",\n    locales: [\"en\", \"ja\"],\n    localeConfigs: {\n      en: { label: \"English\", htmlLang: \"en\", path: \"en\" },\n      ja: { label: \"日本語\", htmlLang: \"ja\", path: \"ja\" },\n    },\n  },\n  themeConfig: {\n    colorMode: {\n      defaultMode: \"light\",\n      selectSwitch: true,\n    },\n    header: {\n      title: \"My Project\",\n      logo: {\n        href: \"/\",\n        type: \"Vercel\u0026Next.js\",\n      },\n    },\n    footer: {\n      title: \"My Footer\",\n      social: {\n        github: true,\n        twitter: \"my_twitter_handle\",\n      },\n    },\n  },\n};\n```\n\n2. **i18n Configuration**\n\n- `defaultLocale` specifies the default language used.\n- `locales` defines an array of supported languages, while `localeConfigs` provides settings for each language.\n- The `path` sets the URL prefix. For example, the Japanese page will be redirected to `/ja`.\n\n3. **Theme Settings**\n\n- `colorMode` controls the switching between dark mode and system-based themes.\n- The `header` and `footer` sections configure the logo and navigation in the site's header and footer.\n\n### 2. `middleware.ts` Setup Guide\n\n1. **Locale Middleware Setup**\n\nTo enable internationalization using `next-intl`, configure locale handling in `middleware.ts`. This middleware applies the appropriate language settings based on the URL.\n\n```typescript\nimport createMiddleware from \"next-intl/middleware\";\nimport { locales, localePrefix, pathnames } from \"@/components/provider/nav\";\nimport richtplConfig from \"../richtpl.config\";\nimport { NextRequest, NextResponse } from \"next/server\";\n\nconst intlMiddleware = createMiddleware({\n  locales,\n  localePrefix,\n  pathnames,\n  defaultLocale: richtplConfig.i18n.defaultLocale,\n});\n\nexport function middleware(request: NextRequest) {\n  let response = intlMiddleware(request);\n  if (!response) {\n    response = NextResponse.next();\n  }\n  response.headers.set(\"x-pathname\", request.nextUrl.pathname);\n  return response;\n}\n\nexport const config = {\n  matcher: [\"/\", `/(ja|en)/:path*`],\n};\n```\n\n2. **Matcher Configuration**\n\n- The `matcher` defines the URL patterns processed by the middleware. The pattern `/(ja|en)/:path*` covers both English and Japanese pages.\n- If other languages are added, they must be included in the `matcher` as well.\n\n### Example of Theme Switching and i18n Implementation\n\n```typescript\nimport { useState } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport { useTranslations } from \"next-intl\";\n\nexport default function Header() {\n  const { theme, setTheme } = useTheme();\n  const t = useTranslations(\"Header\");\n\n  return (\n    \u003cheader\u003e\n      \u003ch1\u003e{t(\"title\")}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e setTheme(theme === \"light\" ? \"dark\" : \"light\")}\u003e\n        {theme === \"light\" ? \"dark mode\" : \"light mode\"}\n      \u003c/button\u003e\n    \u003c/header\u003e\n  );\n}\n```\n\n- This code implements a button to toggle themes and displays i18n-supported text.\n\n### FAQ\n\n#### Q: How can I add other languages?\n\nA: To add a new language, update the `i18n` configuration in `richtpl.tsx` by adding the language to the `locales` array and providing corresponding settings in `localeConfigs`. Additionally, update the `matcher` in `middleware.ts` to include the new language.\n\n#### Q: How can I customize theme switching?\n\nA: You can customize the default theme and toggle options in the `themeConfig.colorMode` settings. Additionally, you can dynamically switch themes using the `useTheme` hook.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselcold%2Fscpay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselcold%2Fscpay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselcold%2Fscpay/lists"}