Skip to content

Commit c8e6ba4

Browse files
lertsoftlertsoft
committed
push
1 parent 34e138b commit c8e6ba4

38 files changed

+16102
-2
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
out

‎.eslintrc‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
// Configuration for JavaScript files
3+
"extends": [
4+
"airbnb-base",
5+
"next/core-web-vitals",
6+
"plugin:prettier/recommended"
7+
],
8+
"rules": {
9+
"prettier/prettier": [
10+
"error",
11+
{
12+
"singleQuote": true
13+
}
14+
]
15+
},
16+
"overrides": [
17+
// Configuration for TypeScript files
18+
{
19+
"files": ["**/*.ts", "**/*.tsx"],
20+
"plugins": ["@typescript-eslint", "unused-imports", "tailwindcss"],
21+
"extends": [
22+
"plugin:tailwindcss/recommended",
23+
"airbnb-typescript",
24+
"next/core-web-vitals",
25+
"plugin:prettier/recommended"
26+
],
27+
"parserOptions": {
28+
"project": "./tsconfig.json"
29+
},
30+
"rules": {
31+
"prettier/prettier": [
32+
"error",
33+
{
34+
"singleQuote": true,
35+
"endOfLine": "auto"
36+
}
37+
],
38+
"react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
39+
"jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system
40+
"react/require-default-props": "off", // Allow non-defined react props as undefined
41+
"react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
42+
"@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
43+
"import/order": [
44+
"error",
45+
{
46+
"groups": ["builtin", "external", "internal"],
47+
"pathGroups": [
48+
{
49+
"pattern": "react",
50+
"group": "external",
51+
"position": "before"
52+
}
53+
],
54+
"pathGroupsExcludedImportTypes": ["react"],
55+
"newlines-between": "always",
56+
"alphabetize": {
57+
"order": "asc",
58+
"caseInsensitive": true
59+
}
60+
}
61+
],
62+
"@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
63+
"import/prefer-default-export": "off", // Named export is easier to refactor automatically
64+
"class-methods-use-this": "off", // _document.tsx use render method without `this` keyword
65+
"tailwindcss/classnames-order": [
66+
"warn",
67+
{
68+
"officialSorting": true
69+
}
70+
], // Follow the same ordering as the official plugin `prettier-plugin-tailwindcss`
71+
"@typescript-eslint/no-unused-vars": "off",
72+
"unused-imports/no-unused-imports": "error",
73+
"unused-imports/no-unused-vars": [
74+
"error",
75+
{ "argsIgnorePattern": "^_" }
76+
]
77+
}
78+
}
79+
]
80+
}

‎.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next
13+
/out
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
Thumbs.db
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# dotenv local files
29+
.env*.local
30+
31+
# local folder
32+
local
33+
34+
# vercel
35+
.vercel

‎.husky/pre-commit‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
# Disable concurent to run build-types after ESLint in lint-staged
5+
npx lint-staged --concurrent false

‎.vscode/extensions.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"recommendations": [
3+
"dbaeumer.vscode-eslint",
4+
"esbenp.prettier-vscode",
5+
"mikestead.dotenv",
6+
"csstools.postcss",
7+
"blanu.vscode-styled-jsx",
8+
"msjsdiag.debugger-for-chrome",
9+
"bradlc.vscode-tailwindcss"
10+
]
11+
}

‎.vscode/launch.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Next: Chrome",
11+
"url": "http://localhost:3000",
12+
"webRoot": "${workspaceFolder}"
13+
},
14+
{
15+
"type": "node",
16+
"request": "launch",
17+
"name": "Next: Node",
18+
"program": "${workspaceFolder}/node_modules/.bin/next",
19+
"args": ["dev"],
20+
"autoAttachChildProcesses": true,
21+
"skipFiles": ["<node_internals>/**"],
22+
"console": "integratedTerminal"
23+
}
24+
],
25+
"compounds": [
26+
{
27+
"name": "Next: Full",
28+
"configurations": ["Next: Node", "Next: Chrome"]
29+
}
30+
]
31+
}

‎.vscode/settings.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"editor.tabSize": 2,
3+
"editor.detectIndentation": false,
4+
"jest.autoRun": {
5+
"watch": false,
6+
"onSave": "test-file"
7+
},
8+
"search.exclude": {
9+
"package-lock.json": true
10+
},
11+
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
12+
"editor.formatOnSave": false,
13+
"editor.codeActionsOnSave": [
14+
"source.addMissingImports",
15+
"source.fixAll.eslint"
16+
],
17+
// Multiple language settings for json and jsonc files
18+
"[json][jsonc]": {
19+
"editor.formatOnSave": true,
20+
"editor.defaultFormatter": "esbenp.prettier-vscode"
21+
}
22+
}

‎.vscode/tasks.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"label": "Project wide type checking with TypeScript",
8+
"type": "npm",
9+
"script": "build-types",
10+
"problemMatcher": ["$tsc"],
11+
"group": {
12+
"kind": "build",
13+
"isDefault": true
14+
},
15+
"presentation": {
16+
"clear": true,
17+
"reveal": "never"
18+
}
19+
}
20+
]
21+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Ronny Coste.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 133 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,133 @@
1-
# typescript_nextjs_template
2-
Template with all the plugins and frameworks that I like to use.
1+
# Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript
2+
3+
🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.
4+
5+
Clone this project and use it to create your own [Next.js](https://nextjs.org) project.
6+
7+
### Features
8+
9+
Developer experience first:
10+
11+
- 🔥 [Next.js](https://nextjs.org) for Static Site Generator
12+
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)
13+
- 💅 PostCSS for processing Tailwind CSS and integrated to `styled-jsx`
14+
- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
15+
- ✅ Strict Mode for TypeScript and React 17
16+
- ✏️ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
17+
- 💡 Absolute Imports
18+
- 🛠 Code Formatter with [Prettier](https://prettier.io)
19+
- 🦊 Husky for Git Hooks
20+
- 🚫 Lint-staged for running linters on Git staged files
21+
- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
22+
- 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
23+
- ⚙️ [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
24+
- 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
25+
- 🌈 Include a FREE minimalist theme
26+
- 💯 Maximize lighthouse score
27+
28+
Built-in feature from Next.js:
29+
30+
- ☕ Minify HTML & CSS
31+
- 💨 Live reload
32+
- ✅ Cache busting
33+
34+
### Philosophy
35+
36+
- Minimal code
37+
- SEO-friendly
38+
- 🚀 Production-ready
39+
40+
### Requirements
41+
42+
- Node.js 14+ and npm
43+
44+
### Getting started
45+
46+
Run the following command on your local environment:
47+
48+
```
49+
git clone --depth=1 https://github.com/lertsoft/typescript-ventures.git my-project-name
50+
cd my-project-name
51+
npm install
52+
```
53+
54+
Then, you can run locally in development mode with live reload:
55+
56+
```
57+
npm run dev
58+
```
59+
60+
Open http://localhost:3000 with your favorite browser to see your project.
61+
62+
```
63+
.
64+
├── README.md # README file
65+
├── next.config.js # Next JS configuration
66+
├── public # Public folder
67+
│ └── assets
68+
│ └── images # Image used by default template
69+
├── src
70+
│ ├── layout # Atomic layout components
71+
│ ├── pages # Next JS pages
72+
│ ├── styles # PostCSS style folder with Tailwind
73+
│ ├── templates # Default template
74+
│ └── utils # Utility folder
75+
├── tailwind.config.js # Tailwind CSS configuration
76+
└── tsconfig.json # TypeScript configuration
77+
```
78+
79+
### Customization
80+
81+
You can easily configure Next.tsx Boilerplate. Please change the following file:
82+
83+
- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your website favicon, you can generate from https://favicon.io/favicon-converter/
84+
- `src/styles/global.css`: your CSS file using Tailwind CSS
85+
- `src/utils/AppConfig.ts`: configuration file
86+
- `src/templates/Main.tsx`: default theme
87+
88+
### Deploy to production
89+
90+
You can see the results locally in production mode with:
91+
92+
```
93+
$ npm run build
94+
$ npm run start
95+
```
96+
97+
The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).
98+
99+
You can create an optimized production build with:
100+
101+
```
102+
npm run build-prod
103+
```
104+
105+
Now, your blog is ready to be deployed. All generated files are located at `out` folder, which you can deploy with any hosting service.
106+
107+
### Deploy to Netlify
108+
109+
Clone this repository on own GitHub account and deploy to Netlify:
110+
111+
[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)
112+
113+
### Deploy to Vercel
114+
115+
Deploy this Next JS Boilerplate on Vercel in one click:
116+
117+
[![Deploy with Vercel](https://vercel.com/button)]
118+
119+
### VSCode information (optional)
120+
121+
If you are VSCode users, you can have a better integration with VSCode by installing the suggested extension in `.vscode/extension.json`. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.
122+
123+
Pro tips: if you need a project wide type checking with TypeScript, you can run a build with <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> on Mac.
124+
125+
### Contributions
126+
127+
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
128+
129+
### License
130+
131+
Licensed under the MIT License, Copyright © 2022
132+
133+
See [LICENSE](LICENSE) for more information.

0 commit comments

Comments
 (0)