{"id":20788864,"url":"https://github.com/erkobridee/nextjs-ssg","last_synced_at":"2025-05-05T18:36:31.582Z","repository":{"id":37058247,"uuid":"313897379","full_name":"erkobridee/nextjs-ssg","owner":"erkobridee","description":"Next.js and the static site generation support","archived":false,"fork":false,"pushed_at":"2024-10-29T17:11:26.000Z","size":5801,"stargazers_count":21,"open_issues_count":11,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T18:28:19.625Z","etag":null,"topics":["eslint","i18next","nextjs","react","ssg","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://erkobridee.github.io/nextjs-ssg","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erkobridee.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":"2020-11-18T10:20:51.000Z","updated_at":"2024-10-19T16:16:35.000Z","dependencies_parsed_at":"2024-01-26T09:29:51.070Z","dependency_job_id":"f4b0e6fb-bcf2-4f4f-908d-ab382d39d8cc","html_url":"https://github.com/erkobridee/nextjs-ssg","commit_stats":null,"previous_names":[],"tags_count":26,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnextjs-ssg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnextjs-ssg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnextjs-ssg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnextjs-ssg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erkobridee","download_url":"https://codeload.github.com/erkobridee/nextjs-ssg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225053455,"owners_count":17413606,"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":["eslint","i18next","nextjs","react","ssg","tailwindcss","typescript"],"created_at":"2024-11-17T15:17:36.803Z","updated_at":"2024-11-17T15:17:37.326Z","avatar_url":"https://github.com/erkobridee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js (SSG) + Tailwind CSS (postcss, sass, clsx) + TypeScript + i18next : Starter\n\n\u003e [Next.js SSG - Static Site Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)\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\n`npx create-next-app nextjs-ssg --use-npm`\n\nℹ️\u0026nbsp;\u0026nbsp;use the [node.js](https://nodejs.org/en/) v16 LTS\n\n## Bootstrap a new project using this template\n\nYou can do it following one of the 2 options bellow:\n\n### 1. Using `create-next-app`\n\n```\nnpx create-next-app -e https://github.com/erkobridee/nextjs-ssg ${new project name}\n```\n\n### 2. Use this repository as template\n\n![use this template](https://docs.github.com/assets/images/help/repository/use-this-template-button.png)\n\n[Creating a repository from a template | GitHub Docs](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm start\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### Bundle Analize\n\n```bash\nnpm run bundle-analyze\n```\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Useful links\n\n- [Next.js](https://nextjs.org/)\n\n  - [Next.js v12](https://nextjs.org/blog/next-12)\n\n    - [[YouTube] Next.js 12 is a Beast | Fireship](https://www.youtube.com/watch?v=lRQ5z7i7pxE)\n\n    - [[YouTube Playlist] Next.js Conf 2021](https://www.youtube.com/playlist?list=PLBnKlKpPeagnJYpc5geAHU40ld5hk8i82)\n\n    - **Known issue:** some thrid-party libraries doesn't work correctly when it's bundled using the [swcMinify](https://nextjs.org/docs/upgrading#swc-replacing-terser-for-minification)\n\n  - [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app)\n\n  - [Markdown/MDX with Next.js](https://nextjs.org/blog/markdown)\n\n  - [Data Fetching | Nextjs Documentation](https://nextjs.org/docs/basic-features/data-fetching)\n\n    - [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) - fetch data at build time\n\n    - [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) - generate static files\n\n  - [[GitHub] next.js/examples/gh-pages/](https://github.com/vercel/next.js/tree/master/examples/gh-pages)\n\n  - [[GitHub] next.js/examples/with-jest/](https://github.com/vercel/next.js/tree/master/examples/with-jest)\n\n- [[YouTube] Next.js Static Site Generation (SSG)](https://www.youtube.com/watch?v=_W-tcVzu-Ms)\n\n- [[YouTube] Next.js Static Site Generation (SSG) Tutorial](https://www.youtube.com/watch?v=pY0vWYLDDco)\n\n- [[YouTube] Learn Next.js in One Video - Fundamentals of Next.js](https://www.youtube.com/watch?v=tt3PUvhOVzo)\n\n- [[YouTube] Next.js 10's New Image Component](https://www.youtube.com/watch?v=ckH6RHjy-5U)\n\n- [How to Use Github Actions to Deploy a Next.js Website to AWS S3 | freeCodeCamp](https://www.freecodecamp.org/news/how-to-use-github-actions-to-deploy-a-next-js-website-to-aws-s3/)\n\n- [Next.js app on Github Pages | ITNEXT](https://itnext.io/next-js-app-on-github-pages-768020f2b65e)\n\n- [Start a clean Next.js project with TypeScript, ESLint and Prettier from scratch | PAULIN TROGNON](https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js)\n\n  - [[GitHub] paulintrognon/next-typescript](https://github.com/paulintrognon/next-typescript)\n\n- [What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps | freeCodeCamp](https://www.freecodecamp.org/news/static-site-generation-with-nextjs/)\n\n- [Nested dynamic layouts in Next.js apps | React Tricks](https://reacttricks.com/nested-dynamic-layouts-in-next-apps/) - [youtube](https://www.youtube.com/watch?v=69-mnojSa0M) | [github](https://github.com/kheruc/rt-nested-layouts)\n\n- [Automatic Image Optimization: Next.js 10 New Standards for 2020 | Hackernoon](https://hackernoon.com/automatic-image-optimization-nextjs-10-new-standards-for-2020-dc1h3zlf)\n\n- [[GitHub] newhighsco/next-plugin-svgr](https://github.com/newhighsco/next-plugin-svgr) - SVGR plugin for Next.js\n\n- [[GitHub] toplenboren/simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)\n\n### TypeScript\n\n`npm install --save-dev typescript @types/react @types/node`\n\n- [TypeScript Language](https://www.typescriptlang.org/)\n\n- React with TypeScript\n\n  - [React + TypeScript - Cheatsheets](https://github.com/typescript-cheatsheets/react)\n\n  - [useTypescript — A Complete Guide to React Hooks and TypeScript](https://levelup.gitconnected.com/usetypescript-a-complete-guide-to-react-hooks-and-typescript-db1858d1fb9c)\n\n- [Next.js - Basic Features: TypeScript](https://nextjs.org/docs/basic-features/typescript)\n\n- [Next.js TypeScript Types](https://nextjs.org/learn/excel/typescript/nextjs-types)\n\n  - [TypeScript Next.js example](https://github.com/vercel/next.js/tree/canary/examples/with-typescript)\n\n- [Using Next.js with TypeScript | LogRocket](https://blog.logrocket.com/using-next-js-with-typescript/) - 2020/12/18\n\n- [How to setup NextJS with TypeScript and ESLint + prettier | De Code Natura](https://decodenatura.com/how-to-set-up-nextjs-typescript-eslint-prettier/) - 2020/05/18\n\n### Testing\n\n- [Testing | Next.js Docs](https://nextjs.org/docs/testing)\n\n- [How to Set Up Jest and React Testing Library with Next.js | Kyrell Dixon](https://www.kyrelldixon.com/blog/setup-jest-and-react-testing-library-with-nextjs)\n\n- [How to create Next.js project with TypeScript, Jest, React Testing Lib | Night Zen](https://nightzen.dev/how-to-create-a-nextjs-project-with-typescript-jest-react-testing-library-and-test-renderer) - 2021/07/31\n\n- [How to Setup Next.js + TypeScript + Eslint + Storybook + Jest + Enzyme - by Caelin Sutch | JavaScript in Plain English](https://javascript.plainenglish.io/how-to-setup-next-js-typescript-eslint-storybook-jest-enzyme-610451591df0) - 2020/12/31\n\n### i18n\n\n\u003e the next.js doesn't support natively i18n on the static site generation on the v10 - [i18n with next export calls getStaticProps for each defined lang, but then errors\n\u003e #18318](https://github.com/vercel/next.js/issues/18318#issuecomment-723984723)\n\u003e\n\u003e said that, we need to use the react side i18n approach\n\n`npm i --save i18next i18next-browser-languagedetector react-i18next`\n\n- [i18next](https://www.i18next.com/)\n\n  - [react-i18next](https://react.i18next.com/)\n\n  - [i18next-browser-languagedetector | npm](https://www.npmjs.com/package/i18next-browser-languagedetector)\n\n- [[GitHub] i18next/i18next-parser](https://github.com/i18next/i18next-parser)\n\n- [[GitHub] locize/translation-check](https://github.com/locize/translation-check) - This package shows an overview of your translations. Check which keys are not yet translated.\n\n- [[GitHub] juliandavidmr/i18n-editor](https://github.com/juliandavidmr/i18n-editor) - [web editor](https://juliandavidmr.github.io/i18n-editor/dist/) : Simple JSON localization file manager for i18n json files\n\n- [BabelEdit](https://www.codeandweb.com/babeledit) - (paid) Translation editor for (web) apps\n\n  - [Licenses | BabelEdit Store](https://www.codeandweb.com/store/babeledit-single)\n\n  - [How to translate your React app with react-i18next | BabelEdit Tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-i18next)\n\n#### i18next plugins that doesn't work with next.js\n\n- [i18next-http-backend | npm](https://www.npmjs.com/package/i18next-http-backend) - `Error: ReactDOMServer does not yet support Suspense.`\n\n- [i18next-localstorage-backend | npm](https://www.npmjs.com/package/i18next-localstorage-backend) - `ReferenceError: window is not defined`\n\n  - [How to solve \"window is not defined\" errors in React and Next.js | Dev.to](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97)\n\n- [i18next-chained-backend | npm](https://www.npmjs.com/package/i18next-chained-backend)\n\n### TailwindCSS\n\n- [TailwindCSS](https://tailwindcss.com/)\n\n  - [Using PostCSS as your preprocessor | TailwindCSS Docs](https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor)\n\n    - [[GitHub] tailwindlabs/prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)\n\n      - [Automatic Class Sorting with Prettier - Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)\n\n- [Craft Scalable, Custom-Made Interfaces with Tailwind CSS | egghead.io](https://egghead.io/courses/craft-scalable-custom-made-interfaces-with-tailwind-css-8dfee898)\n\n- [Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application | Hacker Noon](https://hackernoon.com/connecting-react-17-typescript-tailwind-css-nextjs-into-developers-friendly-application-cj283wpv)\n\n- [Customizing PostCSS Config | Next.js Docs](https://nextjs.org/docs/advanced-features/customizing-postcss-config)\n\n- [[YouTube] Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js - Tailwind Labs](https://www.youtube.com/watch?v=xNMYz74zNHM)\n\n### pt_Br\n\n- [[YouTube] Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components | Code/Drops #50](https://www.youtube.com/watch?v=1nVUfZg2dSA)\n\n- [[YouTube] Serverless com ReactJS e Next.js na Vercel | Code/Drops #54](https://www.youtube.com/watch?v=Cz55Jmhfw84)\n\n- [[YouTube] Essa feature fez o Next.js ser o framework mais popular | Code/Drops #59](https://www.youtube.com/watch?v=u1kCtkVR7cE)\n\n- [[YouTube] Como fazer SEO com React, NextJS e Deploy estático feat. Dicas de Performance | Pokedex](https://www.youtube.com/watch?v=c8mVlakBESE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkobridee%2Fnextjs-ssg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferkobridee%2Fnextjs-ssg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkobridee%2Fnextjs-ssg/lists"}