Full Code of agcty/nextjs-advanced-starter for AI

Repository: agcty/nextjs-advanced-starter
Branch: main
Commit: 833b7dfe9134
Files: 22
Total size: 40.4 KB

Directory structure:
gitextract_8pdm2523/

├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .vscode/
│   └── settings.json
├── README.md
├── __tests__/
│   ├── __snapshots__/
│   │   └── snapshot.tsx.snap
│   ├── index.test.tsx
│   └── snapshot.tsx
├── jest.config.js
├── jest.setup.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── src/
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   └── styles/
│       └── tailwind.scss
├── tailwind.config.js
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .eslintignore
================================================
**/node_modules/*
**/out/*
**/.next/*


================================================
FILE: .eslintrc.json
================================================
{
  "plugins": ["testing-library", "unused-imports", "prettier"],
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-unused-vars": "off",
    "react/require-default-props": 0,
    "unused-imports/no-unused-imports": "error",
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
    "react/jsx-props-no-spreading": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/react-in-jsx-scope": 0,
    "react/display-name": 0,
    "react/prop-types": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/indent": 0,
    "@typescript-eslint/member-delimiter-style": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-var-requires": 0,
    "no-use-before-define": 0,
    "@typescript-eslint/no-use-before-define": 0,
    "import/extensions": ["error", "never", { "svg": "always" }],
    "react/no-unescaped-entities": 0,
    "jsx-a11y/label-has-associated-control": 0,
    "react/no-unused-prop-types": 0,
    "no-underscore-dangle": 0,
    "@typescript-eslint/no-unused-vars": [
      0,
      {
        "argsIgnorePattern": "^_"
      }
    ],
    "no-console": [
      2,
      {
        "allow": ["warn", "error"]
      }
    ],
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  }
}


================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: .prettierignore
================================================
node_modules
.next
yarn.lock
package-lock.json
public


================================================
FILE: .prettierrc
================================================
{
  "semi": false,
  "singleQuote": false
}


================================================
FILE: .vscode/settings.json
================================================
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}


================================================
FILE: README.md
================================================
**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.

# Next.js Advanced Starter 🚀

An opinionated starter skeleton with advanced features for Next.js.

Use Tailwind CSS, ESLint, Prettier & absolute imports instantly.
Easily extendable zero-config template for pros and beginners.

Check out the [Demo website.](https://nextjs-advanced-starter.vercel.app/)

## Table of Contents

- [Next.js Advanced Starter 🚀](#nextjs-advanced-starter-)
  - [Table of Contents](#table-of-contents)
  - [Why?](#why)
  - [Features](#features)
  - [Who this template is for](#who-this-template-is-for)
  - [How to use](#how-to-use)
  - [Explanation why some dependencies are in this template](#explanation-why-some-dependencies-are-in-this-template)
    - [@tailwindcss/forms](#tailwindcssforms)
    - [@tailwindcss/typography](#tailwindcsstypography)
  - [Extending the template](#extending-the-template)
    - [Config files](#config-files)
    - [Changing the font](#changing-the-font)
    - [Configuring ESLint rules](#configuring-eslint-rules)
    - [Adding new absolute import paths](#adding-new-absolute-import-paths)
  - [Recommended extensions for VSCode](#recommended-extensions-for-vscode)
  - [Resources](#resources)

## Why?

This template aims to provide a minimal well-thought-out base for building advanced Next.js powered websites.

It 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.

The 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.

**Inviting you to collaborate**
That 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.

## Features

- Fast design workflow with Tailwind CSS 3.0
  - write css like the cool kids
  - unused classes are purged automatically = really small css bundle size
- TypeScript
  - typed JavaScript
  - drastically reduces errors
  - #1 must have in any web-dev project
- Customizable ESLint config
- Code formatting with Prettier
  - Code is auto-formatted on save
- Inter font
  - Nice looking apple-like open source font.
  - Don't like it? It's easily [replacable](#changing-the-font)
- Standardized absolute imports
  - Import from @components/MyComp instead of ../../components/MyComp

## Who this template is for

**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.

If 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.

If 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.

## How to use

1. Click **"Use this Template"** button which will create a new github repo for you automatically
2. Pull the newly created repo by following the github guide which will be shown after you finish step 1.
3. Install dependencies and run dev server:

```bash
npm install
# or
yarn install

# then
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Explanation why some dependencies are in this template

### @tailwindcss/forms

First party dependency for resetting input styles so you don't have to manually reset like this:

```css
textarea,
input[type="text"],
input[type="search"],
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}
```

### @tailwindcss/typography

A 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.

E.g this html:

```html
<article class="prose lg:prose-xl">
  <h1>How to set up an enterprise Next.js stack</h1>
  <p>
    Configuring Next.js with TypeScript, ESLint & prettier can become really
    annoying, especially if you're a beginner and don't know the intricate
    details of all the moving parts in a web-dev environment. The most important
    things you have to set up are:
  </p>
  <ul>
    <li>A working ESLint config</li>
    <li>Prettier plugins that auto-format your code</li>
    <li>Absolute imports</li>
  </ul>
</article>
```

will be rendered like this:

![prose output](https://i.imgur.com/xJD5Ojv.png)

If you don't need or want this dependency you can safely remove it.

## Extending the template

### Config files

| File name               | What it does                                                                                              |
| ----------------------- | --------------------------------------------------------------------------------------------------------- |
| `tsconfig.json`         | TypeScript configuration. Tells IDE which absolute imports exist and works in conjunction with .babelrc   |
| `.eslintrc.json`        | Config file for finding and fixing problems in code. E.g: No function should be used before it's defined. |
| `tailwind.config.js`    | TailwindCSS config. Adds new sizes, shadows, borders etc. to your tailwind classes.                       |
| `postcss.config.js`     | Tells your project to include TailwindCSS in build chain.                                                 |
| `prettier.config.js`    | Rules for formatting your code. E.g: indent code 6 spaces instead of 4                                    |
| `.vscode/settings.json` | Custom settings for your VSCode workspace. Tells VSCode to auto-format code on save.                      |

### Changing the font

1. In `src/pages/_app.tsx` replace the link tag with your url (can be Google Fonts, Adobe Typekit, etc.)

```html
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
  rel="stylesheet"
/>
```

2. In tailwind.config.js replace "Inter" with your custom font

```javascript
extend: {
  fontFamily: {
    sans: ["Inter", ...defaultTheme.fontFamily.sans],
}
```

As of Next 10.0.2 google fonts are optimized automatically: <https://nextjs.org/blog/next-10-2#automatic-webfont-optimization>

Tip: 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.

### Configuring ESLint rules

If 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.

### Adding new absolute import paths

This 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:

Add path in `.tsconfig`

```javascript
"@myalias/*": ["./src/myaliasfolder/*"]
```

That'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.

## Recommended extensions for VSCode

If you're a beginner and don't know which extensions you need, definitely install these:

1. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Adds error highlighting to VSCode.
2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Auto-fixes formatting errors everytime you hit save.
3. [TailwindCSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): Tailwind className suggestions as you type.

## Resources

If you're not yet familiar with some of the technologies used in this project here are some resources to help you get started:

[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.

[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.


================================================
FILE: __tests__/__snapshots__/snapshot.tsx.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders homepage unchanged 1`] = `
<div>
  <div>
    <main
      class="flex min-h-screen justify-center bg-gradient-to-b from-gray-50 via-gray-50 to-gray-100 py-20"
    >
      <div>
        <h1
          class="px-5 text-center text-4xl font-bold leading-tight tracking-tight sm:mt-4 sm:text-6xl"
        >
          Next.js
          <br />
          Advanced Starter
        </h1>
        <h2
          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"
        >
          Tailwind CSS 3.0, ESLint & Prettier without a single line of config! Easily extendable zero-config template for pros and beginners.
        </h2>
        <div
          class="px-4 sm:px-0"
        >
          <section
            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"
            style="box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px 0px;"
          >
            <div
              class="flex flex-col justify-center rounded-l-lg bg-gray-50"
            >
              <ul
                class="space-y-5 px-12 py-12"
              >
                <li
                  class="flex items-center"
                >
                  <svg
                    class="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M5 13l4 4L19 7"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                    />
                  </svg>
                  <p
                    class="ml-3 hidden text-lg text-gray-600 sm:inline"
                  >
                    Fast design workflow with 
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Tailwind CSS
                    </span>
                  </p>
                  <p
                    class="mx-auto sm:hidden"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Tailwind CSS
                    </span>
                  </p>
                </li>
                <li
                  class="flex items-center"
                >
                  <svg
                    class="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M5 13l4 4L19 7"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                    />
                  </svg>
                  <p
                    class="ml-3 hidden text-lg text-gray-600 sm:inline"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      TypeScript
                    </span>
                     by default
                  </p>
                  <p
                    class="mx-auto sm:hidden"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      TypeScript
                    </span>
                  </p>
                </li>
                <li
                  class="flex items-center"
                >
                  <svg
                    class="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M5 13l4 4L19 7"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                    />
                  </svg>
                  <p
                    class="ml-3 hidden text-lg text-gray-600 sm:inline"
                  >
                    Customizable 
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      ESLint config
                    </span>
                  </p>
                  <p
                    class="mx-auto sm:hidden"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      ESLint config
                    </span>
                  </p>
                </li>
                <li
                  class="flex items-center"
                >
                  <svg
                    class="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M5 13l4 4L19 7"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                    />
                  </svg>
                  <p
                    class="ml-3 hidden text-lg text-gray-600 sm:inline"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Code formatting
                    </span>
                     with Prettier
                  </p>
                  <p
                    class="mx-auto sm:hidden"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Code formatting
                    </span>
                  </p>
                </li>
                <li
                  class="flex items-center"
                >
                  <svg
                    class="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M5 13l4 4L19 7"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                    />
                  </svg>
                  <p
                    class="ml-3 hidden text-lg text-gray-600 sm:inline"
                  >
                    Standardized 
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      absolute imports
                    </span>
                  </p>
                  <p
                    class="mx-auto sm:hidden"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Absolute imports
                    </span>
                  </p>
                </li>
                <li
                  class="flex items-center"
                >
                  <svg
                    class="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M5 13l4 4L19 7"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                    />
                  </svg>
                  <p
                    class="ml-3 hidden text-lg text-gray-600 sm:inline"
                  >
                    Ready-to-go 
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Jest
                    </span>
                     setup
                  </p>
                  <p
                    class="mx-auto sm:hidden"
                  >
                    <span
                      class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700"
                    >
                      <svg
                        class="mr-3 inline-flex h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:hidden"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M5 13l4 4L19 7"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                        />
                      </svg>
                      Absolute imports
                    </span>
                  </p>
                </li>
              </ul>
            </div>
            <div
              class="space-y-5 place-self-center px-4 py-24 text-center"
            >
              <h3
                class="text-3xl font-bold"
              >
                Get it 👇
              </h3>
              <span
                class="inline-flex rounded-md shadow-sm"
              >
                <a
                  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"
                  href="https://github.com/agcty/nextjs-advanced-starter"
                  type="button"
                >
                  Copy Template from GitHub
                </a>
              </span>
            </div>
          </section>
          <p
            class="mt-6 text-center text-xs font-medium text-gray-600"
          >
            Built by
             
            <a
              class="font-medium text-blue-600 transition duration-150 ease-in-out hover:text-blue-500 focus:underline focus:outline-none"
              href="https://twitter.com/agctyz"
            >
              @agctyz
            </a>
          </p>
        </div>
      </div>
    </main>
  </div>
</div>
`;


================================================
FILE: __tests__/index.test.tsx
================================================
import { render, screen } from "@testing-library/react"

import Home from "../src/pages/index"

describe("Home", () => {
  it("cta opens github", () => {
    render(<Home />)

    expect(screen.getByText("Copy Template from GitHub")).toHaveAttribute(
      "href",
      "https://github.com/agcty/nextjs-advanced-starter"
    )
  })
})


================================================
FILE: __tests__/snapshot.tsx
================================================
import { render } from "@testing-library/react"

import Home from "../src/pages/index"

it("renders homepage unchanged", () => {
  const { container } = render(<Home />)
  expect(container).toMatchSnapshot()
})


================================================
FILE: jest.config.js
================================================
const nextJest = require("next/jest")

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    "^@/components/(.*)$": "<rootDir>/components/$1",

    "^@/pages/(.*)$": "<rootDir>/pages/$1",
  },
  testEnvironment: "jest-environment-jsdom",
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)


================================================
FILE: jest.setup.js
================================================
// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom/extend-expect"


================================================
FILE: next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: next.config.js
================================================
module.exports = {
  reactStrictMode: true,
}


================================================
FILE: package.json
================================================
{
  "name": "with-typescript-eslint-jest",
  "author": "@agctyz",
  "license": "MIT",
  "version": "1.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --pretty --noEmit",
    "format": "prettier --write .",
    "lint": "eslint src --fix",
    "test": "jest",
    "test-all": "yarn lint && yarn type-check && yarn test"
  },
  "dependencies": {
    "next": "12.1.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "sass": "^1.49.9"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.0",
    "@tailwindcss/typography": "^0.5.2",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.39",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.12.0",
    "eslint-config-next": "^12.1.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-testing-library": "^5.1.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "jest": "^27.5.1",
    "postcss": "^8.4.12",
    "prettier": "^2.6.1",
    "prettier-plugin-tailwindcss": "^0.1.8",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.6.3"
  }
}


================================================
FILE: postcss.config.js
================================================
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


================================================
FILE: src/pages/_app.tsx
================================================
import React from "react"

import { AppProps } from "next/app"
import "../styles/tailwind.scss"

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: src/pages/_document.tsx
================================================
import React from "react"

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from "next/document"

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument


================================================
FILE: src/pages/index.tsx
================================================
import React from "react"

import Head from "next/head"
import Link from "next/link"

export default function Home() {
  return (
    <div>
      <Head>
        <title>Next.js advanced start template.</title>

        <meta
          name="description"
          content="Use tailwind css, eslint, prettier & absolute imports instantly.
            Easily extendable zero-config template for pros and beginners."
        />

        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="flex min-h-screen justify-center bg-gradient-to-b from-gray-50 via-gray-50 to-gray-100 py-20">
        <div>
          <h1 className="px-5 text-center text-4xl font-bold leading-tight tracking-tight sm:mt-4 sm:text-6xl">
            Next.js
            <br />
            Advanced Starter
          </h1>

          <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">
            Tailwind CSS 3.0, ESLint & Prettier without a single line of config!
            Easily extendable zero-config template for pros and beginners.
          </h2>

          <div className="px-4 sm:px-0">
            <section
              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"
              style={{
                boxShadow: "rgba(0, 0, 0, 0.12) 0px 30px 60px 0px",
              }}
            >
              <div className="flex flex-col justify-center rounded-l-lg bg-gray-50">
                <FeatureList>
                  <Feature main="Tailwind CSS">
                    Fast design workflow with <InfoText text="Tailwind CSS" />
                  </Feature>

                  <Feature main="TypeScript">
                    <InfoText text="TypeScript" /> by default
                  </Feature>

                  <Feature main="ESLint config">
                    Customizable <InfoText text="ESLint config" />
                  </Feature>

                  <Feature main="Code formatting">
                    <InfoText text="Code formatting" /> with Prettier
                  </Feature>

                  <Feature main="Absolute imports">
                    Standardized <InfoText text="absolute imports" />
                  </Feature>

                  <Feature main="Absolute imports">
                    Ready-to-go <InfoText text="Jest" /> setup
                  </Feature>
                </FeatureList>
              </div>

              <div className="space-y-5 place-self-center px-4 py-24 text-center">
                <h3 className="text-3xl font-bold">Get it 👇</h3>

                <span className="inline-flex rounded-md shadow-sm">
                  <Link href="https://github.com/agcty/nextjs-advanced-starter">
                    <a
                      type="button"
                      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"
                    >
                      Copy Template from GitHub
                    </a>
                  </Link>
                </span>
              </div>
            </section>
            <p className="mt-6 text-center text-xs font-medium text-gray-600">
              Built by{" "}
              <a
                className="font-medium text-blue-600 transition duration-150 ease-in-out hover:text-blue-500 focus:underline focus:outline-none"
                href="https://twitter.com/agctyz"
              >
                @agctyz
              </a>
            </p>
          </div>
        </div>
      </main>
    </div>
  )
}

interface FeatureListProps {
  children: React.ReactNode
}

function FeatureList({ children }: FeatureListProps) {
  return <ul className="space-y-5 px-12 py-12">{children}</ul>
}

function Feature({ children, main }) {
  return (
    <li className="flex items-center">
      <CheckIcon className="hiddden hidden h-5 w-5 flex-shrink-0 rounded-full bg-blue-600 p-1 text-gray-100 sm:inline" />
      <p className="ml-3 hidden text-lg text-gray-600 sm:inline">{children}</p>

      <p className="mx-auto sm:hidden">
        <InfoText text={main} />
      </p>
    </li>
  )
}

function InfoText({ text }) {
  return (
    <span className="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 font-medium text-gray-700">
      <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" />
      {text}
    </span>
  )
}

function CheckIcon(props) {
  return (
    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M5 13l4 4L19 7"
      />
    </svg>
  )
}


================================================
FILE: src/styles/tailwind.scss
================================================
/* purgecss start ignore */
@tailwind base;

@tailwind components;
/* purgecss end ignore */
@tailwind utilities;

/* purgecss start ignore */
html {
  @apply antialiased;
}


================================================
FILE: tailwind.config.js
================================================
const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  },
  // eslint-disable-next-line global-require
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
}


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@*": [
        "./src/*"
      ]
    },
    "incremental": true
  },
  "exclude": [
    "node_modules",
    ".next",
    "out"
  ],
  "include": [
    "next-env.d.ts",
    "src/**/*.tsx",
    "src/**/*.ts"
  ]
}