[
  {
    "path": ".eslintignore",
    "content": "**/node_modules/*\n**/out/*\n**/.next/*\n"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"plugins\": [\"testing-library\", \"unused-imports\", \"prettier\"],\n  \"extends\": [\n    \"next/core-web-vitals\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"rules\": {\n    \"no-unused-vars\": \"off\",\n    \"react/require-default-props\": 0,\n    \"unused-imports/no-unused-imports\": \"error\",\n    \"prettier/prettier\": \"error\",\n    \"@typescript-eslint/explicit-module-boundary-types\": 0,\n    \"react/jsx-filename-extension\": [1, { \"extensions\": [\".ts\", \".tsx\"] }],\n    \"react/jsx-props-no-spreading\": 0,\n    \"jsx-a11y/anchor-is-valid\": 0,\n    \"react/react-in-jsx-scope\": 0,\n    \"react/display-name\": 0,\n    \"react/prop-types\": 0,\n    \"@typescript-eslint/explicit-function-return-type\": 0,\n    \"@typescript-eslint/explicit-member-accessibility\": 0,\n    \"@typescript-eslint/indent\": 0,\n    \"@typescript-eslint/member-delimiter-style\": 0,\n    \"@typescript-eslint/no-explicit-any\": 0,\n    \"@typescript-eslint/no-var-requires\": 0,\n    \"no-use-before-define\": 0,\n    \"@typescript-eslint/no-use-before-define\": 0,\n    \"import/extensions\": [\"error\", \"never\", { \"svg\": \"always\" }],\n    \"react/no-unescaped-entities\": 0,\n    \"jsx-a11y/label-has-associated-control\": 0,\n    \"react/no-unused-prop-types\": 0,\n    \"no-underscore-dangle\": 0,\n    \"@typescript-eslint/no-unused-vars\": [\n      0,\n      {\n        \"argsIgnorePattern\": \"^_\"\n      }\n    ],\n    \"no-console\": [\n      2,\n      {\n        \"allow\": [\"warn\", \"error\"]\n      }\n    ],\n    \"import/order\": [\n      \"error\",\n      {\n        \"groups\": [\"builtin\", \"external\", \"internal\"],\n        \"pathGroups\": [\n          {\n            \"pattern\": \"react\",\n            \"group\": \"external\",\n            \"position\": \"before\"\n          }\n        ],\n        \"pathGroupsExcludedImportTypes\": [\"react\"],\n        \"newlines-between\": \"always\",\n        \"alphabetize\": {\n          \"order\": \"asc\",\n          \"caseInsensitive\": true\n        }\n      }\n    ]\n  }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": ".prettierignore",
    "content": "node_modules\n.next\nyarn.lock\npackage-lock.json\npublic\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"semi\": false,\n  \"singleQuote\": false\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": true,\n    \"source.fixAll\": true\n  },\n  \"eslint.validate\": [\n    \"javascript\",\n    \"javascriptreact\",\n    \"typescript\",\n    \"typescriptreact\"\n  ]\n}\n"
  },
  {
    "path": "README.md",
    "content": "**Notice**: While Next.js remains a great option, I'd recommend checking out [Remix](https://github.com/remix-run/remix). Since I've started using it, I've been able to build production-ready apps **10 times faster**. No kidding. I don't say this lightly, I used to love Next.js (and still do) and actually tried to convince people that Next is better than Remix for various reasons. But on a mission to become a better developer, I've started looking into other frameworks and keep an open mind. 2023 is an especially exciting year for web developers as more and more edge-native technologies pop up. If you're serious about web development, I'd highly recommend trying other frameworks.\n\n# Next.js Advanced Starter 🚀\n\nAn opinionated starter skeleton with advanced features for Next.js.\n\nUse Tailwind CSS, ESLint, Prettier & absolute imports instantly.\nEasily extendable zero-config template for pros and beginners.\n\nCheck out the [Demo website.](https://nextjs-advanced-starter.vercel.app/)\n\n## Table of Contents\n\n- [Next.js Advanced Starter 🚀](#nextjs-advanced-starter-)\n  - [Table of Contents](#table-of-contents)\n  - [Why?](#why)\n  - [Features](#features)\n  - [Who this template is for](#who-this-template-is-for)\n  - [How to use](#how-to-use)\n  - [Explanation why some dependencies are in this template](#explanation-why-some-dependencies-are-in-this-template)\n    - [@tailwindcss/forms](#tailwindcssforms)\n    - [@tailwindcss/typography](#tailwindcsstypography)\n  - [Extending the template](#extending-the-template)\n    - [Config files](#config-files)\n    - [Changing the font](#changing-the-font)\n    - [Configuring ESLint rules](#configuring-eslint-rules)\n    - [Adding new absolute import paths](#adding-new-absolute-import-paths)\n  - [Recommended extensions for VSCode](#recommended-extensions-for-vscode)\n  - [Resources](#resources)\n\n## Why?\n\nThis template aims to provide a minimal well-thought-out base for building advanced Next.js powered websites.\n\nIt feels like there are so many templates and tutorials about configuring stacks out there that just don't work, no matter what you do. This is the template that **just works**. I know how frustrating it can be just wanting to build something but needing DAYS for coming up with the initial configuration. Especially getting Eslint + Prettier + absolute imports to work (well) together is super annoying and I believe using these features should be as simple as clicking a button. Also you probably want to style your webapp and there are few better ways than styling it with Tailwind CSS.\n\nThe reason why I created this template in the first place is because I absolutely hate having to copy the same config over to a new project everytime and I don't really want to use existing templates because there always seems to be something wrong with them. Either the config is weird or the maintainers are not transparent with features.\n\n**Inviting you to collaborate**\nThat being said I invite you to leave your critique about this template. If there's something wrong with ESLint, if prettier doesn't work as expected, if there's a new version of React or if the README is not transparent enough please don't hesitate to open an issue or (even better) a pull request. I've had enough with templates that don't work.\n\n## Features\n\n- Fast design workflow with Tailwind CSS 3.0\n  - write css like the cool kids\n  - unused classes are purged automatically = really small css bundle size\n- TypeScript\n  - typed JavaScript\n  - drastically reduces errors\n  - #1 must have in any web-dev project\n- Customizable ESLint config\n- Code formatting with Prettier\n  - Code is auto-formatted on save\n- Inter font\n  - Nice looking apple-like open source font.\n  - Don't like it? It's easily [replacable](#changing-the-font)\n- Standardized absolute imports\n  - Import from @components/MyComp instead of ../../components/MyComp\n\n## Who this template is for\n\n**TLDR** This template is for beginners and pros alike. For Pros: You don't have to copy the same config over to a new project. For Beginners: Start coding like the pros without having to configure anything.\n\nIf you're a newcomer to Next.js or React and you just want to start building something, this is a great place to start without worrying about configuring rules, code-formatting, css purging etc. You can figure that out later, just get developing and build things people love. I personally feel like that the features in this template are the way to go for starting a new web-dev project. Especially tailwind css has seen explosive growth and is probably going to be the standard way of styling webapps in the future. This is the minimal base-template I wish I've had when I started developing with React.\n\nIf you're already a pro, this is the base-template for you. It's incredibly easy to extend or reconfigure. It's deliberately kept small so it stays performant while you build on top of it.\n\n## How to use\n\n1. Click **\"Use this Template\"** button which will create a new github repo for you automatically\n2. Pull the newly created repo by following the github guide which will be shown after you finish step 1.\n3. Install dependencies and run dev server:\n\n```bash\nnpm install\n# or\nyarn install\n\n# then\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Explanation why some dependencies are in this template\n\n### @tailwindcss/forms\n\nFirst party dependency for resetting input styles so you don't have to manually reset like this:\n\n```css\ntextarea,\ninput[type=\"text\"],\ninput[type=\"search\"],\ninput[type=\"button\"],\ninput[type=\"submit\"] {\n  -webkit-appearance: none;\n  border-radius: 0;\n}\n```\n\n### @tailwindcss/typography\n\nA Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults. Just add the class \"prose\" to your html and content will be styled automatically.\n\nE.g this html:\n\n```html\n<article class=\"prose lg:prose-xl\">\n  <h1>How to set up an enterprise Next.js stack</h1>\n  <p>\n    Configuring Next.js with TypeScript, ESLint & prettier can become really\n    annoying, especially if you're a beginner and don't know the intricate\n    details of all the moving parts in a web-dev environment. The most important\n    things you have to set up are:\n  </p>\n  <ul>\n    <li>A working ESLint config</li>\n    <li>Prettier plugins that auto-format your code</li>\n    <li>Absolute imports</li>\n  </ul>\n</article>\n```\n\nwill be rendered like this:\n\n![prose output](https://i.imgur.com/xJD5Ojv.png)\n\nIf you don't need or want this dependency you can safely remove it.\n\n## Extending the template\n\n### Config files\n\n| File name               | What it does                                                                                              |\n| ----------------------- | --------------------------------------------------------------------------------------------------------- |\n| `tsconfig.json`         | TypeScript configuration. Tells IDE which absolute imports exist and works in conjunction with .babelrc   |\n| `.eslintrc.json`        | Config file for finding and fixing problems in code. E.g: No function should be used before it's defined. |\n| `tailwind.config.js`    | TailwindCSS config. Adds new sizes, shadows, borders etc. to your tailwind classes.                       |\n| `postcss.config.js`     | Tells your project to include TailwindCSS in build chain.                                                 |\n| `prettier.config.js`    | Rules for formatting your code. E.g: indent code 6 spaces instead of 4                                    |\n| `.vscode/settings.json` | Custom settings for your VSCode workspace. Tells VSCode to auto-format code on save.                      |\n\n### Changing the font\n\n1. In `src/pages/_app.tsx` replace the link tag with your url (can be Google Fonts, Adobe Typekit, etc.)\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\n2. In tailwind.config.js replace \"Inter\" with your custom font\n\n```javascript\nextend: {\n  fontFamily: {\n    sans: [\"Inter\", ...defaultTheme.fontFamily.sans],\n}\n```\n\nAs of Next 10.0.2 google fonts are optimized automatically: <https://nextjs.org/blog/next-10-2#automatic-webfont-optimization>\n\nTip: The font you choose should have at least these weights: 400, 500, 600, 700, 800. You need these weights for the tailwind font classes to have an effect. E.g if you don't include the weight 500, the class \"font-medium\" won't have any effect.\n\n### Configuring ESLint rules\n\nIf you need additional rules or want to turn off specific rules just edit `.eslintrc.js`. Only change the order of plugins and items in the \"extends\" array if you know what you're doing as this can have unexpected side effects: Items lower down the list override previous extensions. This is the intended behaviour so you can extend and configure existing rules easily.\n\n### Adding new absolute import paths\n\nThis will instruct Next.js to set up a new alias to your specific folder. If you try to import a file with @myalias now it will still throw an error however because we need to tell our IDE that this path actually exists:\n\nAdd path in `.tsconfig`\n\n```javascript\n\"@myalias/*\": [\"./src/myaliasfolder/*\"]\n```\n\nThat's it! Nextjs 11 now automatically sets up babel and everything else and just works. In previous releases you had to manually configure babel as well.\n\n## Recommended extensions for VSCode\n\nIf you're a beginner and don't know which extensions you need, definitely install these:\n\n1. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Adds error highlighting to VSCode.\n2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Auto-fixes formatting errors everytime you hit save.\n3. [TailwindCSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): Tailwind className suggestions as you type.\n\n## Resources\n\nIf you're not yet familiar with some of the technologies used in this project here are some resources to help you get started:\n\n[Tailwind CSS course](https://tailwindcss.com/course): Free course by the creators of tailwind. Definitely check it out. It helps you \"think\" in tailwind. E.g before going through this course I styled my webapps by adding classes from the beginning. However, a much better approach is to 1) semantically structure your html without any classes and 2) to then add styling by using tailwind classes.\n\n[ESLint config guide](https://eslint.org/docs/user-guide/configuring): If you need to configure ESLint read their documentation (or at least the parts you need). You'll be surprised how much just makes sense after that.\n"
  },
  {
    "path": "__tests__/__snapshots__/snapshot.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders homepage unchanged 1`] = `\n<div>\n  <div>\n    <main\n      class=\"flex min-h-screen justify-center bg-gradient-to-b from-gray-50 via-gray-50 to-gray-100 py-20\"\n    >\n      <div>\n        <h1\n          class=\"px-5 text-center text-4xl font-bold leading-tight tracking-tight sm:mt-4 sm:text-6xl\"\n        >\n          Next.js\n          <br />\n          Advanced Starter\n        </h1>\n        <h2\n          class=\"mx-auto mt-8 max-w-4xl px-10 text-center text-base tracking-tight text-gray-600 sm:text-2xl md:mt-5 md:text-2xl\"\n        >\n          Tailwind CSS 3.0, ESLint & Prettier without a single line of config! Easily extendable zero-config template for pros and beginners.\n        </h2>\n        <div\n          class=\"px-4 sm:px-0\"\n        >\n          <section\n            class=\"mt-6 grid min-h-[350px] w-full grid-cols-1 rounded-lg bg-white sm:mt-20 sm:min-w-[1000px] sm:grid-cols-2\"\n            style=\"box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px 0px;\"\n          >\n            <div\n              class=\"flex flex-col justify-center rounded-l-lg bg-gray-50\"\n            >\n              <ul\n                class=\"space-y-5 px-12 py-12\"\n              >\n                <li\n                  class=\"flex items-center\"\n                >\n                  <svg\n                    class=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      d=\"M5 13l4 4L19 7\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"2\"\n                    />\n                  </svg>\n                  <p\n                    class=\"ml-3 hidden text-lg text-gray-600 sm:inline\"\n                  >\n                    Fast design workflow with \n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Tailwind CSS\n                    </span>\n                  </p>\n                  <p\n                    class=\"mx-auto sm:hidden\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Tailwind CSS\n                    </span>\n                  </p>\n                </li>\n                <li\n                  class=\"flex items-center\"\n                >\n                  <svg\n                    class=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      d=\"M5 13l4 4L19 7\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"2\"\n                    />\n                  </svg>\n                  <p\n                    class=\"ml-3 hidden text-lg text-gray-600 sm:inline\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      TypeScript\n                    </span>\n                     by default\n                  </p>\n                  <p\n                    class=\"mx-auto sm:hidden\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      TypeScript\n                    </span>\n                  </p>\n                </li>\n                <li\n                  class=\"flex items-center\"\n                >\n                  <svg\n                    class=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      d=\"M5 13l4 4L19 7\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"2\"\n                    />\n                  </svg>\n                  <p\n                    class=\"ml-3 hidden text-lg text-gray-600 sm:inline\"\n                  >\n                    Customizable \n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      ESLint config\n                    </span>\n                  </p>\n                  <p\n                    class=\"mx-auto sm:hidden\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      ESLint config\n                    </span>\n                  </p>\n                </li>\n                <li\n                  class=\"flex items-center\"\n                >\n                  <svg\n                    class=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      d=\"M5 13l4 4L19 7\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"2\"\n                    />\n                  </svg>\n                  <p\n                    class=\"ml-3 hidden text-lg text-gray-600 sm:inline\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Code formatting\n                    </span>\n                     with Prettier\n                  </p>\n                  <p\n                    class=\"mx-auto sm:hidden\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Code formatting\n                    </span>\n                  </p>\n                </li>\n                <li\n                  class=\"flex items-center\"\n                >\n                  <svg\n                    class=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      d=\"M5 13l4 4L19 7\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"2\"\n                    />\n                  </svg>\n                  <p\n                    class=\"ml-3 hidden text-lg text-gray-600 sm:inline\"\n                  >\n                    Standardized \n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      absolute imports\n                    </span>\n                  </p>\n                  <p\n                    class=\"mx-auto sm:hidden\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Absolute imports\n                    </span>\n                  </p>\n                </li>\n                <li\n                  class=\"flex items-center\"\n                >\n                  <svg\n                    class=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      d=\"M5 13l4 4L19 7\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"2\"\n                    />\n                  </svg>\n                  <p\n                    class=\"ml-3 hidden text-lg text-gray-600 sm:inline\"\n                  >\n                    Ready-to-go \n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Jest\n                    </span>\n                     setup\n                  </p>\n                  <p\n                    class=\"mx-auto sm:hidden\"\n                  >\n                    <span\n                      class=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\"\n                    >\n                      <svg\n                        class=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          d=\"M5 13l4 4L19 7\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        />\n                      </svg>\n                      Absolute imports\n                    </span>\n                  </p>\n                </li>\n              </ul>\n            </div>\n            <div\n              class=\"space-y-5 place-self-center px-4 py-24 text-center\"\n            >\n              <h3\n                class=\"text-3xl font-bold\"\n              >\n                Get it 👇\n              </h3>\n              <span\n                class=\"inline-flex rounded-md shadow-sm\"\n              >\n                <a\n                  class=\"inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-4 font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-blue-500 focus:border-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-400 active:bg-blue-700 sm:px-10\"\n                  href=\"https://github.com/agcty/nextjs-advanced-starter\"\n                  type=\"button\"\n                >\n                  Copy Template from GitHub\n                </a>\n              </span>\n            </div>\n          </section>\n          <p\n            class=\"mt-6 text-center text-xs font-medium text-gray-600\"\n          >\n            Built by\n             \n            <a\n              class=\"font-medium text-blue-600 transition duration-150 ease-in-out hover:text-blue-500 focus:underline focus:outline-none\"\n              href=\"https://twitter.com/agctyz\"\n            >\n              @agctyz\n            </a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "__tests__/index.test.tsx",
    "content": "import { render, screen } from \"@testing-library/react\"\n\nimport Home from \"../src/pages/index\"\n\ndescribe(\"Home\", () => {\n  it(\"cta opens github\", () => {\n    render(<Home />)\n\n    expect(screen.getByText(\"Copy Template from GitHub\")).toHaveAttribute(\n      \"href\",\n      \"https://github.com/agcty/nextjs-advanced-starter\"\n    )\n  })\n})\n"
  },
  {
    "path": "__tests__/snapshot.tsx",
    "content": "import { render } from \"@testing-library/react\"\n\nimport Home from \"../src/pages/index\"\n\nit(\"renders homepage unchanged\", () => {\n  const { container } = render(<Home />)\n  expect(container).toMatchSnapshot()\n})\n"
  },
  {
    "path": "jest.config.js",
    "content": "const nextJest = require(\"next/jest\")\n\nconst createJestConfig = nextJest({\n  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment\n  dir: \"./\",\n})\n\n// Add any custom config to be passed to Jest\nconst customJestConfig = {\n  setupFilesAfterEnv: [\"<rootDir>/jest.setup.js\"],\n  moduleNameMapper: {\n    // Handle module aliases (this will be automatically configured for you soon)\n    \"^@/components/(.*)$\": \"<rootDir>/components/$1\",\n\n    \"^@/pages/(.*)$\": \"<rootDir>/pages/$1\",\n  },\n  testEnvironment: \"jest-environment-jsdom\",\n}\n\n// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async\nmodule.exports = createJestConfig(customJestConfig)\n"
  },
  {
    "path": "jest.setup.js",
    "content": "// Optional: configure or set up a testing framework before each test.\n// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`\n\n// Used for __tests__/testing-library.js\n// Learn more: https://github.com/testing-library/jest-dom\nimport \"@testing-library/jest-dom/extend-expect\"\n"
  },
  {
    "path": "next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "next.config.js",
    "content": "module.exports = {\n  reactStrictMode: true,\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"with-typescript-eslint-jest\",\n  \"author\": \"@agctyz\",\n  \"license\": \"MIT\",\n  \"version\": \"1.1.0\",\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"type-check\": \"tsc --pretty --noEmit\",\n    \"format\": \"prettier --write .\",\n    \"lint\": \"eslint src --fix\",\n    \"test\": \"jest\",\n    \"test-all\": \"yarn lint && yarn type-check && yarn test\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.1\",\n    \"react\": \"^18.0.0\",\n    \"react-dom\": \"^18.0.0\",\n    \"sass\": \"^1.49.9\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/aspect-ratio\": \"^0.4.0\",\n    \"@tailwindcss/forms\": \"^0.5.0\",\n    \"@tailwindcss/typography\": \"^0.5.2\",\n    \"@testing-library/jest-dom\": \"^5.16.2\",\n    \"@testing-library/react\": \"^12.1.3\",\n    \"@types/jest\": \"^27.4.1\",\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.39\",\n    \"autoprefixer\": \"^10.4.2\",\n    \"eslint\": \"^8.12.0\",\n    \"eslint-config-next\": \"^12.1.1\",\n    \"eslint-config-prettier\": \"^8.5.0\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"eslint-plugin-testing-library\": \"^5.1.0\",\n    \"eslint-plugin-unused-imports\": \"^2.0.0\",\n    \"jest\": \"^27.5.1\",\n    \"postcss\": \"^8.4.12\",\n    \"prettier\": \"^2.6.1\",\n    \"prettier-plugin-tailwindcss\": \"^0.1.8\",\n    \"tailwindcss\": \"^3.0.23\",\n    \"typescript\": \"^4.6.3\"\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n}\n"
  },
  {
    "path": "src/pages/_app.tsx",
    "content": "import React from \"react\"\n\nimport { AppProps } from \"next/app\"\nimport \"../styles/tailwind.scss\"\n\nfunction MyApp({ Component, pageProps }: AppProps): JSX.Element {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "src/pages/_document.tsx",
    "content": "import React from \"react\"\n\nimport Document, {\n  Html,\n  Head,\n  Main,\n  NextScript,\n  DocumentContext,\n} from \"next/document\"\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx: DocumentContext) {\n    const initialProps = await Document.getInitialProps(ctx)\n    return { ...initialProps }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head>\n          <link\n            href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\"\n            rel=\"stylesheet\"\n          />\n        </Head>\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    )\n  }\n}\n\nexport default MyDocument\n"
  },
  {
    "path": "src/pages/index.tsx",
    "content": "import React from \"react\"\n\nimport Head from \"next/head\"\nimport Link from \"next/link\"\n\nexport default function Home() {\n  return (\n    <div>\n      <Head>\n        <title>Next.js advanced start template.</title>\n\n        <meta\n          name=\"description\"\n          content=\"Use tailwind css, eslint, prettier & absolute imports instantly.\n            Easily extendable zero-config template for pros and beginners.\"\n        />\n\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n\n      <main className=\"flex min-h-screen justify-center bg-gradient-to-b from-gray-50 via-gray-50 to-gray-100 py-20\">\n        <div>\n          <h1 className=\"px-5 text-center text-4xl font-bold leading-tight tracking-tight sm:mt-4 sm:text-6xl\">\n            Next.js\n            <br />\n            Advanced Starter\n          </h1>\n\n          <h2 className=\"mx-auto mt-8 max-w-4xl px-10 text-center text-base tracking-tight text-gray-600 sm:text-2xl md:mt-5 md:text-2xl\">\n            Tailwind CSS 3.0, ESLint & Prettier without a single line of config!\n            Easily extendable zero-config template for pros and beginners.\n          </h2>\n\n          <div className=\"px-4 sm:px-0\">\n            <section\n              className=\"mt-6 grid min-h-[350px] w-full grid-cols-1 rounded-lg bg-white sm:mt-20 sm:min-w-[1000px] sm:grid-cols-2\"\n              style={{\n                boxShadow: \"rgba(0, 0, 0, 0.12) 0px 30px 60px 0px\",\n              }}\n            >\n              <div className=\"flex flex-col justify-center rounded-l-lg bg-gray-50\">\n                <FeatureList>\n                  <Feature main=\"Tailwind CSS\">\n                    Fast design workflow with <InfoText text=\"Tailwind CSS\" />\n                  </Feature>\n\n                  <Feature main=\"TypeScript\">\n                    <InfoText text=\"TypeScript\" /> by default\n                  </Feature>\n\n                  <Feature main=\"ESLint config\">\n                    Customizable <InfoText text=\"ESLint config\" />\n                  </Feature>\n\n                  <Feature main=\"Code formatting\">\n                    <InfoText text=\"Code formatting\" /> with Prettier\n                  </Feature>\n\n                  <Feature main=\"Absolute imports\">\n                    Standardized <InfoText text=\"absolute imports\" />\n                  </Feature>\n\n                  <Feature main=\"Absolute imports\">\n                    Ready-to-go <InfoText text=\"Jest\" /> setup\n                  </Feature>\n                </FeatureList>\n              </div>\n\n              <div className=\"space-y-5 place-self-center px-4 py-24 text-center\">\n                <h3 className=\"text-3xl font-bold\">Get it 👇</h3>\n\n                <span className=\"inline-flex rounded-md shadow-sm\">\n                  <Link href=\"https://github.com/agcty/nextjs-advanced-starter\">\n                    <a\n                      type=\"button\"\n                      className=\"inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-4 font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-blue-500 focus:border-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-400 active:bg-blue-700 sm:px-10\"\n                    >\n                      Copy Template from GitHub\n                    </a>\n                  </Link>\n                </span>\n              </div>\n            </section>\n            <p className=\"mt-6 text-center text-xs font-medium text-gray-600\">\n              Built by{\" \"}\n              <a\n                className=\"font-medium text-blue-600 transition duration-150 ease-in-out hover:text-blue-500 focus:underline focus:outline-none\"\n                href=\"https://twitter.com/agctyz\"\n              >\n                @agctyz\n              </a>\n            </p>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n\ninterface FeatureListProps {\n  children: React.ReactNode\n}\n\nfunction FeatureList({ children }: FeatureListProps) {\n  return <ul className=\"space-y-5 px-12 py-12\">{children}</ul>\n}\n\nfunction Feature({ children, main }) {\n  return (\n    <li className=\"flex items-center\">\n      <CheckIcon className=\"hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline\" />\n      <p className=\"ml-3 hidden text-lg text-gray-600 sm:inline\">{children}</p>\n\n      <p className=\"mx-auto sm:hidden\">\n        <InfoText text={main} />\n      </p>\n    </li>\n  )\n}\n\nfunction InfoText({ text }) {\n  return (\n    <span className=\"inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700\">\n      <CheckIcon className=\"mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden\" />\n      {text}\n    </span>\n  )\n}\n\nfunction CheckIcon(props) {\n  return (\n    <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" {...props}>\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M5 13l4 4L19 7\"\n      />\n    </svg>\n  )\n}\n"
  },
  {
    "path": "src/styles/tailwind.scss",
    "content": "/* purgecss start ignore */\n@tailwind base;\n\n@tailwind components;\n/* purgecss end ignore */\n@tailwind utilities;\n\n/* purgecss start ignore */\nhtml {\n  @apply antialiased;\n}\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "const defaultTheme = require(\"tailwindcss/defaultTheme\")\n\nmodule.exports = {\n  content: [\n    \"./src/pages/**/*.{js,ts,jsx,tsx}\",\n    \"./src/components/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: [\"Inter\", ...defaultTheme.fontFamily.sans],\n      },\n    },\n  },\n  variants: {\n    extend: {},\n  },\n  // eslint-disable-next-line global-require\n  plugins: [require(\"@tailwindcss/typography\"), require(\"@tailwindcss/forms\")],\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@*\": [\n        \"./src/*\"\n      ]\n    },\n    \"incremental\": true\n  },\n  \"exclude\": [\n    \"node_modules\",\n    \".next\",\n    \"out\"\n  ],\n  \"include\": [\n    \"next-env.d.ts\",\n    \"src/**/*.tsx\",\n    \"src/**/*.ts\"\n  ]\n}\n"
  }
]