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

How to set up an enterprise Next.js stack

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:

``` 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 ``` 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: 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`] = `

Next.js
Advanced Starter

Tailwind CSS 3.0, ESLint & Prettier without a single line of config! Easily extendable zero-config template for pros and beginners.

  • Tailwind CSS

  • TypeScript

  • ESLint config

  • Code formatting

  • Absolute imports

  • Absolute imports

Get it 👇

Copy Template from GitHub

Built by @agctyz

`; ================================================ 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() 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() 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: ["/jest.setup.js"], moduleNameMapper: { // Handle module aliases (this will be automatically configured for you soon) "^@/components/(.*)$": "/components/$1", "^@/pages/(.*)$": "/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 ================================================ /// /// // 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 } 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 (
) } } 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 (
Next.js advanced start template.

Next.js
Advanced Starter

Tailwind CSS 3.0, ESLint & Prettier without a single line of config! Easily extendable zero-config template for pros and beginners.

Fast design workflow with by default Customizable with Prettier Standardized Ready-to-go setup

Built by{" "} @agctyz

) } interface FeatureListProps { children: React.ReactNode } function FeatureList({ children }: FeatureListProps) { return
    {children}
} function Feature({ children, main }) { return (

  • {children}

    • ) } function InfoText({ text }) { return ( {text} ) } function CheckIcon(props) { return ( ) } ================================================ 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" ] }