{"id":20153041,"url":"https://github.com/youjinp/nextjs-template","last_synced_at":"2025-06-11T09:33:51.576Z","repository":{"id":44844109,"uuid":"285410257","full_name":"youjinp/nextjs-template","owner":"youjinp","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-01T03:18:38.000Z","size":193,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T12:20:05.426Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/youjinp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-05T21:41:05.000Z","updated_at":"2022-01-22T19:08:00.000Z","dependencies_parsed_at":"2022-07-20T21:02:34.017Z","dependency_job_id":null,"html_url":"https://github.com/youjinp/nextjs-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youjinp%2Fnextjs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youjinp%2Fnextjs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youjinp%2Fnextjs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youjinp%2Fnextjs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youjinp","download_url":"https://codeload.github.com/youjinp/nextjs-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241592861,"owners_count":19987441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T23:16:43.661Z","updated_at":"2025-03-03T01:21:38.866Z","avatar_url":"https://github.com/youjinp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJS Template\n\nThis is a template for NextJS with Typescript, ESLint, Prettier and VSCode configured\n\n# References\n\n- [https://stackoverflow.com/questions/58233482/next-js-setting-up-eslint-for-nextjs](https://stackoverflow.com/questions/58233482/next-js-setting-up-eslint-for-nextjs)\n- [https://medium.com/javascript-scene/streamline-code-reviews-with-eslint-prettier-6fb817a6b51d](https://medium.com/javascript-scene/streamline-code-reviews-with-eslint-prettier-6fb817a6b51d)\n- [https://medium.com/@gogl.alex/how-to-set-up-typescript-eslint-prettier-for-next-gatsby-c5330b4a9b7a](https://medium.com/@gogl.alex/how-to-set-up-typescript-eslint-prettier-for-next-gatsby-c5330b4a9b7a)\n- [https://dev.to/diondre27/using-eslint-and-prettier-in-a-typescript-next-js-project-with-pre-commit-hooks-amf](https://dev.to/diondre27/using-eslint-and-prettier-in-a-typescript-next-js-project-with-pre-commit-hooks-amf)\n- [https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project](https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project)\n- [https://www.youtube.com/watch?v=SydnKbGc7W8](https://www.youtube.com/watch?v=SydnKbGc7W8)\n- [https://medium.com/@joelmasters/setting-up-eslint-for-nextjs-37163d4cabaa](https://medium.com/@joelmasters/setting-up-eslint-for-nextjs-37163d4cabaa)\n\n# Steps to reproduce\n\n1. install eslint\n\n   ```bash\n   npm i --save-dev eslint\n   ```\n\n2. install plugins\n\n   ```bash\n   # https://www.npmjs.com/package/eslint-config-airbnb\n   # installs\n   # - eslint-config-airbnb\n   # - eslint-plugin-import\n   # - eslint-plugin-react\n   # - eslint-plugin-react-hooks\n   # - eslint-plugin-jsx-a11y\n   npx install-peerdeps --dev eslint-config-airbnb\n\n   npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser\n   ```\n\n3. install prettier\n\n   ```bash\n   npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier\n   ```\n\n4. create `eslintrc.yaml`\n\n   - code\n\n     ```yaml\n     ---\n     env:\n       browser: true\n       es2020: true\n     extends:\n       - airbnb\n       - airbnb/hooks\n       - plugin:@typescript-eslint/recommended\n       - plugin:react/recommended\n       - plugin:import/errors\n       - plugin:import/warnings\n       - plugin:import/typescript\n       # always put prettier last\n       - prettier/@typescript-eslint # Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier\n       - plugin:prettier/recommended # Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.\n\n       # doesn't work instead of plugin:prettier/recommended\n       # - prettier\n\n     globals:\n       Atomics: readonly\n       SharedArrayBuffer: readonly\n     parser: '@typescript-eslint/parser'\n     parserOptions:\n       ecmaFeatures:\n         jsx: true\n       ecmaVersion: 2020\n       sourceType: module\n     plugins:\n       - react\n       - '@typescript-eslint'\n       - prettier\n     rules:\n       # rule's settings\n       # --------------------------------\n       # \"off\" or 0 - turn the rule off\n       # \"warn\" or 1 - turn the rule on as a warning (doesn't affect exit code)\n       # \"error\" or 2 - turn the rule on as an error (exit code is 1 when triggered)\n       #\n       # additional rule options\n       # --------------------------------\n       # quotes: [\"error\", \"double\"]\n\n       # use prettierrc.yaml\n       # doesn't work too well here?\n       # prettier/prettier:\n       # - 'error' # ?\n       # - tabWidth: 2\n       # - singleQuote: true\n\n       react/destructuring-assignment: [error, never]\n\n       react/jsx-filename-extension: 'off'\n       import/extensions: 'off'\n       import/prefer-default-export: 'off'\n       react/jsx-one-expression-per-line: 'off'\n\n       # Don't allow unused variables\n       no-unused-vars: 'error'\n\n       # https://github.com/airbnb/javascript/pull/2136\n       # https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/632\n       jsx-a11y/label-has-associated-control:\n         - error\n         - labelComponents: []\n           labelAttributes: []\n           controlComponents: []\n           assert: either\n           depth: 25\n\n       # Allow untyped functions\n       # must be quoted\n       '@typescript-eslint/explicit-module-boundary-types': off\n\n       # Require naming react components\n       react/display-name: 'error'\n\n       # NextJs specific fix: suppress errors for missing 'import React' in files for nextjs\n       react/react-in-jsx-scope: 'off'\n\n     settings:\n       import/resolver:\n         node:\n           extensions:\n             - '.js'\n             - '.jsx'\n             - '.ts'\n             - '.tsx'\n             - '.d.ts'\n     ```\n\n5. create `prettierrc.yaml`\n\n   ```yaml\n   semi: false\n   trailingComma: 'all'\n   singleQuote: false\n   printWidth: 120\n   tabWidth: 4\n   ```\n\n6. install eslint and prettier extension for vscode\n7. vscode settings for auto fixes `.vscode/settings.json`\n\n   ```bash\n   {\n     \"editor.codeActionsOnSave\": {\n       \"source.fixAll.eslint\": true\n     },\n     \"editor.formatOnSave\": true\n   }\n   ```\n\n8. create `.eslintignore`\n\n   ```bash\n   # don't ever lint node_modules\n   node_modules\n   ```\n\n9. edit `package.json`\n\n   ```yaml\n   'scripts': { 'lint': \"eslint '*/**/*.{js,ts,tsx}' --quiet --fix\" }\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoujinp%2Fnextjs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoujinp%2Fnextjs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoujinp%2Fnextjs-template/lists"}