{"id":21660183,"url":"https://github.com/ryohlan/next-ts-template","last_synced_at":"2025-07-17T23:30:56.741Z","repository":{"id":73559750,"uuid":"169792693","full_name":"ryohlan/next-ts-template","owner":"ryohlan","description":"Template for Next.js using parameterized typed routing","archived":false,"fork":false,"pushed_at":"2020-01-06T03:34:26.000Z","size":340,"stargazers_count":65,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-25T09:45:31.403Z","etag":null,"topics":["nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"","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/ryohlan.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":"2019-02-08T20:11:58.000Z","updated_at":"2022-11-16T19:08:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdd39050-a2c3-4151-b4fb-19ed0f1dd5f0","html_url":"https://github.com/ryohlan/next-ts-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/ryohlan/next-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryohlan%2Fnext-ts-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryohlan%2Fnext-ts-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryohlan%2Fnext-ts-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryohlan%2Fnext-ts-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryohlan","download_url":"https://codeload.github.com/ryohlan/next-ts-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryohlan%2Fnext-ts-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265678457,"owners_count":23810114,"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":["nextjs","react","typescript"],"created_at":"2024-11-25T09:32:27.184Z","updated_at":"2025-07-17T23:30:56.733Z","avatar_url":"https://github.com/ryohlan.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Next.js 9 is out!!\n\nThis version includes official dynamic routing using file system.\n\nSo, you may not need this repository. See this.\n\nhttps://nextjs.org/blog/next-9#dynamic-route-segments\n\n\n\n# Next.js TypeScript project template\n\n## Requirement\n\nnode \u003e 10.12.0\n\n## What is this?\n\nThis is a template for Next.js. This. template includes followings:\n\n- TypeScript\n- Parameterized routing\n- custom server\n- styled-components\n- cli for new page\n\nThis project provides a cli for creating new page. For example, if you want to add a new page named profile, run `npm run new:page profile` commands:\n\n```shell\nnpm run new:page profile\n\ncreate new page\n  path: /next-ts-template/pages/profile/index.tsx\ncreate new controller\n  path: /next-ts-template/controllers/profile/index.tsx\ncreate new layout\n  path: /next-ts-template/layouts/profile/index.tsx\nupdate pattern.json\n  pattern:  { page: '/profile', pattern: '/profile' }\nupdate createRoute.ts\n  export const profile = () =\u003e ({\n      as: `/profile`,\n      href: `/profile`\n    })\n```\n\nThe command creates 3 files and updates 2 file.\n\n### Page\n\nAfter the cli ran, a file is created under the pages dir.\n\nThe file includes only default export from the controllers.\n\n```js\n// pages/profile/index.tsx\nexport { default } from '@controllers/profile'\n\n```\n\n### Controller\n\nWhat is the Controller? I call that a file includes `getInitialProps`.\n\nA controller needs to process `getInitialProps`. It is a component but it should not have complex logics for the render. It's obligation is just processing `getInitialProps`.\n\nSince v1.5.0, `PageContext` is added. It provides it's pages's props via React Context API. Components under the page can use them via `usePageContext` hook.\n\n```js\nimport React, { useContext } from 'react'\nimport { NextContext } from 'next'\nimport { AppInitialProps, AppProps } from '@src/app'\nimport Layout from '@layouts/profile'\n\ninterface InitialProps {}\n\ntype Query = {}\n\ntype Props = AppProps\u003cQuery\u003e \u0026 InitialProps\n\nconst getInitialProps = async ({\n\n}: NextContext\u003cQuery\u003e \u0026 AppInitialProps): Promise\u003cInitialProps\u003e =\u003e {\n  return {}\n}\n\nconst PageContext = React.createContext\u003cAppProps\u003cQuery\u003e \u0026 InitialProps\u003e({} as any)\n\nconst Page = (props: Props) =\u003e (\n  \u003cPageContext.Provider value={pageProps}\u003e\n    \u003cLayout /\u003e\n  \u003c/PageContext.Provider\u003e\n)\n\nPage.getInitialProps = getInitialProps\n\nexport default Page\nexport const usePageContext = () =\u003e useContext(PageContext)\n```\n\n### Layout\n\nThe layout is just a React component called by the controller.\n\n```js\nimport React from 'react'\nimport styled from 'styled-components'\n\nconst Layout = () =\u003e {\n  return \u003cWrapper\u003eHello World from profile\u003c/Wrapper\u003e\n}\n\nconst Wrapper = styled.div``\n\nexport default Layout\n```\n\n## Add Parameterized routing\n\nWe often need a Parameterized routing. But Next.js has no smart way. So, we can create it easily by using cli.\n\nFor example, if you need `/users/:id`, you input following argument:\n\n```shell\nnpm run new:page users/:id\n\ncreate new page\n  path: /next-ts-template/pages/users/_id/index.tsx\ncreate new controller\n  path: /next-ts-template/controllers/users/_id/index.tsx\ncreate new layout\n  path: /next-ts-template/layouts/users/_id/index.tsx\nupdate pattern.json\n  pattern:  { page: '/users/_id', pattern: '/users/:id' }\nupdate createRoute.ts\n  export const users__id = ({user_id}: {\n    user_id: string\n  }) =\u003e ({\n      as: `/users/${user_id}`,\n      href: `/users/_id?user_id=${user_id}`\n    })\n```\n\nThen, you can access `/users/1`!\n\nAnd the controller can take query parameters. It is created automatically.\n\n```js\n// users/show.tsx\n...\n\ntype Query = {\n  user_id: string\n}\n...\n```\n\nAnd it provides the route creating function `route/createRoute`. If you reference `users_id`, import `user_id` function from `createRoute`. It is added automatically at a creating new page, so you can invoke route path safely.\n\n```js\n\nexport const users_id = ({user_id}: {\n  user_id: string\n}) =\u003e ({\n  as: `/users/${user_id}`,\n  href: `/users/_id?user_id=${user_id}`\n})\n\n// For example...\n\u003cLink {...users_id({ user_id: user.id })}\u003e\n...\n```\n\n\nAlso multiple query parameters are ok.\n\n```shell\nnpm run new:page users/:id/items/:id\n\ncreate new page\n  path: /next-ts-template/pages/users/_id/items/_id/index.tsx\ncreate new controller\n  path: /next-ts-template/controllers/users/_id/items/_id/index.tsx\ncreate new layout\n  path: /next-ts-template/layouts/users/_id/items/_id/index.tsx\nupdate pattern.json\n  pattern:  { page: '/users/_id/items/_id',\n    pattern: '/users/:user_id/items/:item_id' }\nupdate createRoute.ts\n  export const users_items_show = ({user_id, item_id}: {\n    user_id: string,\n    item_id: string\n  }) =\u003e ({\n      as: `/users/${user_id}/items/${item_id}`,\n      href: `/users/_id/items/_id?user_id=${user_id}\u0026item_id=${item_id}`\n    })\n```\n\n```js\n// users/_id/items/_id.tsx\n\n...\n\ntype Query = {\n  user_id: string,\n  item_id: string\n}\n\n...\n\n```\n\n# Usage\nIn June 6, 2019, Github released the repository templates feature.(https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/)\nThis repository is compatible with it.\nCreate your repository by clicking 'Use this template' top of the page.\n\n# License\nThe MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryohlan%2Fnext-ts-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryohlan%2Fnext-ts-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryohlan%2Fnext-ts-template/lists"}