{"id":20604869,"url":"https://github.com/allaboutapps/next-starter","last_synced_at":"2025-04-15T02:26:30.292Z","repository":{"id":251900710,"uuid":"834047657","full_name":"allaboutapps/next-starter","owner":"allaboutapps","description":"An opinionated NextJS starter project with storybook, vitest, mui, tailwind integration. Typesafe i18n included. Dockerfile provided for easy deployment. Tailored for quick scaffolding of projects @ allaboutapps.","archived":false,"fork":false,"pushed_at":"2025-03-24T19:31:16.000Z","size":980,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T14:11:30.448Z","etag":null,"topics":[],"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/allaboutapps.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":"2024-07-26T09:53:17.000Z","updated_at":"2025-03-24T19:31:12.000Z","dependencies_parsed_at":"2024-08-29T14:56:18.809Z","dependency_job_id":"08a49ccd-45f0-4617-812b-868ae0237acb","html_url":"https://github.com/allaboutapps/next-starter","commit_stats":null,"previous_names":["allaboutapps/next-starter"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allaboutapps%2Fnext-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allaboutapps%2Fnext-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allaboutapps%2Fnext-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allaboutapps%2Fnext-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allaboutapps","download_url":"https://codeload.github.com/allaboutapps/next-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248992987,"owners_count":21195118,"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-16T09:25:21.321Z","updated_at":"2025-04-15T02:26:30.279Z","avatar_url":"https://github.com/allaboutapps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# allaboutapps `next-starter`\n\nThis is the [allaboutapps](https://allaboutapps.at/) TypeScript template for React NextJS applications.\n\n**This template requires a Node version of 20. If you are using nvm, then run `nvm use` to use the correct version. If 20 is not installed run `nvm install`.**\n\n## How to use this template\n- run `npm_config_yes=true npx tiged github:allaboutapps/next-starter my-project-name` to scaffold a new app, where `my-project-name` is the name of the target folder where you want to create your project.\n- change the \"name\" to your project name in `package.json`.\n- run `git init` if you want to initialize a repository. (The template comes with a pre commit hook that lints the project\n  before a commit. A repository is needed for the commit hook to install correctly.)\n- run `pnpm i \u0026\u0026 pnpm dev` to install packages and start the dev server\n- You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\n## CraftCMS projects\nFor headless CraftCMS projects there is a separate branch. Use `npm_config_yes=true npx tiged github:allaboutapps/next-starter#craft my-project-name` for scaffolding. **ATTENTION: this is mainly provided for allaboutapps internal use**\n\n## What's included?\n- We strive to support Visual Studio Code as much as possible.\n- Automatically installs compatible versions of popular libraries within our organization.\n- Support for compile-time safe i18n through customized typings and utils in the projects.\n- Sample Login-Page in the frontend code.\n- Docker setup\n\n## Storybook\nFor developing, previewing and testing UI components we **highly recommend** using [storybook](https://storybook.js.org/). Support\nfor storybook is built in. For examples how to write simple stories see `*.stories.tsx` files (e.g. `src/components/ui/Buttons.stories.tsx`).\n\nTo start the storybook use `pnpm storybook`.\n\n## Builds\n- Builds are configured as `standalone` in next.config.mjs. SPA style builds (aka `output: \"export\"`) are not practical,\nsince dynamic routes without `generateStaticParams()` are not supported (see https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features). This limitation would not allow any detail sites like `product/[productId]` because those cannot be generated statically.\n- Local production builds can be tested using `pnpm build:local` and `pnpm start:local`\n- Support for aaa build pipeline using woodpecker CI is provided in .drone.yml\n- Dockerfile ist provided and can be tested locally using `pnpm docker:build` and `pnpm docker:run`. The app is then reachable under [http://localhost:3000](http://localhost:3000)\n\n\n## Env vars\n- We don't use `NEXT_PUBLIC_` env vars on client side, because those are baked at build time. Since we only want to build a single\ndocker image we use a different approach by using server side env vars for configuration (currently only `RUNTIME_ENVIRONMENT`) \nand forwarding them to our client components. Use the global `publicEnvVars` variable to access the env vars on the client side.\n- `RUNTIME_ENVIRONMENT`\n\n## Build configuration\n- Configure build variants in `hostSettings.ts`. Put in public configs like api base urls directly. Secrets that \nare only used in react server components or API endpoints should not\nbe exposed and MUST be set via environment variables (do NOT forward those to the client using `publicEnvVars`).\n\n## Git version\n- When the project is built in woodpecker CI, the commit hash will automatically be inserted into the `\u003chead\u003e` as comment.\n\n## Debug commands\n\n### Debug string keys\n\nWhen you have many strings in your application it can be hard for QA and translators to figure out which string key in your language file (e.g. en.ts) is used for which on screen text.\n\nFor this you can open your browser console (CMD+ALT+i in Mac Chrome or CTRL+SHIFT+i in Windows Chrome), enter `debugShowStringKeys(true)` and then press RETURN. This will display the string keys additionally to the translated text. Toggle this off again by using `debugShowStringKeys(false)`.\n\n### Other debug commands\n\nYou can add additional debug commands later in `useDebugCommands.ts`. To list all available debug commands use `debugHelp()` in the browser console.\n\n## Icons\n\nIcons are located and defined in `src/component/ui/Icon.tsx`.\n\nTo add new ones following steps are necessary:\n\n- Copy SVG content\n- Add content to path, set filename (Replace \u003csvg\u003e with a \u003cg\u003e if you want to set transformations for all child elements)\n- Camel case the attributes inside the SVG\n\n## Assets\nAll assets are put into `/public/assets`. No files should be put into `/public/` root. This is because of localization middleware\nprepending locales automatically (see https://github.com/vercel/next.js/discussions/36308)\n\nYou could additionally have an asset folder per language which gives you the ability to localize assets as well. See https://github.com/vercel/next.js/discussions/36308#discussioncomment-8645411.\n\n## Licenses\nYou can generate a file containing used third party licenses using `pnpm license-check`. **CC-BY-4.0** is included because of NextJS including caniuse-lite which is using CC-BY-4.0. So the license file is mandatory for attribution. \n`pnpm build` will automatically generate a license file.\n\n## Runtime base path changes\nProjects built using this template assume being served at domain root. E.g. `my-project.com/`. If you want to\nserve in a subfolder like `my-domain.com/my-project` then you have to configure the `basePath` variable in\n`next.config.mjs`.\n\n**Some caveats:** You might need to consider some changes with e.g. linked images, also i18n related redirects in `middleware.ts` might have to be adapted.\n\nCurrently this template **does not support changing the base path at runtime**. Build time base path changes are supported\nby NextJS directly in `next.config.mjs` using the `basePath` variable which is consumed at **build time**. So you'd need\na separate build for each base path. See discussion here https://github.com/vercel/next.js/discussions/41769.\n\nShould you absolutely need a runtime configurable base path in your project then consider this approach (works with\nNext 14, but could break in future versions). https://github.com/vercel/next.js/discussions/41769#discussioncomment-9329938\n\n## Testing\nUnit tests via `vitest` are supported. Run them via `pnpm test` locally and `pnpm test:ci` in your CI environment.\n\n\n## How to generate types from a Swagger specification\n\nWe provide a script that lets you generate TypeScript types for a Swagger specification.\n\n### Local\n\nRun `pnpm codegen local \u003cfile_name\u003e` to generate types from a swagger file in your local repository. Note that the file needs to be located at the root folder.\n\n### Remote\n\nTo use a remote source run `pnpm codegen dev`. Don't forget to set a correct `BASE_URL` in `swagger-codegen.sh` which can be found in `./scripts`.\n\n## favicon and social media link icons\nFavicon can be set using `src/app/favicon.ico` bigger versions can be set using `src/app/icon.png`. Should your\napplication need more versions, follow the documentation at https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons\n\nFor social media link images you can use this: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons\n\n## SEO relevant metadata files\nE.g. robots.txt, sitemap, manifest:\nSee https://nextjs.org/docs/app/api-reference/file-conventions/metadata \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallaboutapps%2Fnext-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallaboutapps%2Fnext-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallaboutapps%2Fnext-starter/lists"}