Walidoux/next-app-boilerplate
Walidoux/next-app-boilerplate
Template
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

Compare commits

base: Walidoux:main
Branches Tags
Walidoux:main
Walidoux:v1.0.1
Walidoux:v1.0.0
..
compare: Walidoux:v1.0.0
Branches Tags
Walidoux:main
Walidoux:v1.0.1
Walidoux:v1.0.0

No commits in common. "main" and "v1.0.0" have entirely different histories.
main ... v1.0.0

18 changed files with 1542 additions and 1863 deletions
Show Stats Expand all files Collapse all files

20
.eslintrc Normal file
View File

@ -0,0 +1,20 @@
{
"plugins": ["prettier", "simple-import-sort"],
"extends": ["standard-with-typescript", "prettier"],
"env": {
"node": true,
"browser": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": "latest",
"project": ["./tsconfig.json"]
},
"ignorePatterns": ["out", "**/*.config.js", "**/*.d.ts", "plopfile.js"],
"rules": {
"prettier/prettier": "error",
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"@next/next/no-img-element": "off"
}
}

4
.github/workflows/ci.yml vendored
View File

@ -2,7 +2,7 @@ name: 'Build & Release'
on:
push:
branches: [main]
branches: [master]
jobs:
build-release:
@ -15,7 +15,7 @@ jobs:
- name: Use Node.js
uses: actions/setup-node@v3.1.1
with:
node-version: 18.x
node-version: 16.x
- name: Install dependencies
run: yarn --frozen-lockfile

6
.github/workflows/lint.yml vendored
View File

@ -2,7 +2,9 @@ name: 'Lint'
on:
push:
branches: [main]
branches: [develop]
pull_request:
branches: [master, develop]
jobs:
build:
@ -15,7 +17,7 @@ jobs:
- name: Use Node.js
uses: actions/setup-node@v3.1.1
with:
node-version: 18.x
node-version: 16.x
- name: Install dependencies
run: yarn --frozen-lockfile

4
.husky/pre-commit Executable file
View File

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint:staged

12
.lintstagedrc Normal file
View File

@ -0,0 +1,12 @@
{
"*": [
"editorconfig-checker"
],
"*.{js,ts,tsx}": [
"prettier --write",
"eslint --fix"
],
"*.{json,jsonc,yml,yaml,md,mdx}": [
"prettier --write"
]
}

2
.prettierignore Normal file
View File

@ -0,0 +1,2 @@
.next
*.hbs

7
.prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"trailingComma": "none",
"bracketSameLine": true
}

17
.releaserc
View File

@ -1,18 +1,12 @@
{
"branches": [
"main"
"master"
],
"plugins": [
[
"@semantic-release/commit-analyzer",
{
"preset": "conventionalcommits",
"parserOpts": {
"noteKeywords": [
"BREAKING CHANGE",
"BREAKING CHANGES"
]
}
"preset": "conventionalcommits"
}
],
[
@ -21,14 +15,7 @@
"preset": "conventionalcommits"
}
],
[
"@semantic-release/changelog",
{
"changelogFile": "CHANGELOG.md"
}
],
"@semantic-release/npm",
"@semantic-release/git",
"@semantic-release/github"
]
}

2
.vscode/settings.json vendored
View File

@ -1,7 +1,9 @@
{
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": "node_modules/typescript/lib",
"prettier.configPath": ".prettierrc",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.bracketPairColorization.enabled": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true

15
CHANGELOG.md
View File

@ -1,15 +0,0 @@
## [1.0.1](https://github.com/Walidoux/next-app-boilerplate/compare/v1.0.0...v1.0.1) (2023-02-10)
### Bug Fixes
* 403 forbidden publish ([6b12abd](https://github.com/Walidoux/next-app-boilerplate/commit/6b12abd1d06376e9df2811fc1291f596106cc85e))
* add missing semantic release config ([3a3688e](https://github.com/Walidoux/next-app-boilerplate/commit/3a3688e1394b3b7c8755d4bd2fc1a063c67ba571))
* resolve unrecognizable ci job ([6af5714](https://github.com/Walidoux/next-app-boilerplate/commit/6af57140377f8d75b74ec78e48b9f25af72ff041))
* test config releaserc ([084d825](https://github.com/Walidoux/next-app-boilerplate/commit/084d8254b411eaedfdd0a0ef6b3e28606ee0c3ea))
* **types:** resolve type key ([169ea5d](https://github.com/Walidoux/next-app-boilerplate/commit/169ea5d30a832817ae9d275d88e1953712ef6224))
### Reverts
* reintegrate releaserc config ([aded12f](https://github.com/Walidoux/next-app-boilerplate/commit/aded12f4dbb704f6a85a29a6fce3700544a24fe0))

2
README.md
View File

@ -2,7 +2,7 @@
⚙️ The Next.js 12.1.0 boilerplate starter code/time saver with Typescript / SCSS. Including linters such as: Prettier, Eslint and Stylelint.
![Boilerplate](https://repository-images.githubusercontent.com/458642085/58b05448-bf95-4492-b1d3-4dbfd7630ce0)
![Boilerplate](https://repository-images.githubusercontent.com/458642085/47fb4fd4-db09-43d5-be7b-1bdd4a7fe851)
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

86
components/NextHead.tsx
View File

@ -1,62 +1,74 @@
import Head from 'next/head'
import type { SEODefaultValues } from 'types/config'
import { SEOConfig } from 'utils/config'
import { projectConfig } from 'utils/config'
interface HeadProps {
title?: string
}
const NextHead: React.FC<HeadProps> = (props) => {
const { title = projectConfig.shortName } = props
const NextHead: React.FC<SEODefaultValues> = ({
shortName = SEOConfig.shortName,
longName = SEOConfig.longName,
color = SEOConfig.color,
defaultLocale = SEOConfig.defaultLocale,
description = SEOConfig.description,
icons = SEOConfig.icons,
url = SEOConfig.url
}) => {
return (
<Head>
<title>{shortName}</title>
<title>{title}</title>
<link rel='shortcut icon' href={icons?.default} type='image/x-icon' />
<link rel='apple-touch-icon' sizes='180x180' href={icons?.apple} />
<link rel='icon' type='image/png' sizes='16x16' href={icons?.['16_16']} />
<link rel='icon' type='image/png' sizes='32x32' href={icons?.['32_32']} />
<link
rel='shortcut icon'
href={projectConfig.icons.default}
type='image/x-icon'
/>
<link
rel='apple-touch-icon'
sizes='180x180'
href={projectConfig.icons.apple}
/>
<link
rel='icon'
type='image/png'
sizes='16x16'
href={projectConfig.icons['16_16']}
/>
<link
rel='icon'
type='image/png'
sizes='32x32'
href={projectConfig.icons['32_32']}
/>
{/* Default meta tags */}
<meta charSet='UTF-8' />
<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='description' content={description} />
<meta name='language' content={defaultLocale} />
<meta name='theme-color' content={color} />
<meta name='copyright' content={shortName} />
<meta name='author' content={shortName} />
<meta name='publisher' content={shortName} />
<meta name='description' content={projectConfig.description} />
<meta name='language' content={projectConfig.defaultLocale} />
<meta name='theme-color' content={projectConfig.color} />
<meta name='copyright' content={projectConfig.shortName} />
<meta name='author' content={projectConfig.shortName} />
<meta name='publisher' content={projectConfig.shortName} />
<meta name='robots' content='index, follow' />
<meta name='rating' content='general' />
<meta name='distribution' content='global' />
<meta name='msapplication-TileColor' content={color} />
<meta name='msapplication-TileColor' content={projectConfig.color} />
{/* Open graph MT */}
<meta property='og:title' content={shortName} />
<meta property='og:title' content={projectConfig.shortName} />
<meta property='og:type' content='website' />
<meta property='og:url' content={url} />
<meta property='og:image' content={icons?.image} />
<meta property='og:description' content={description} />
<meta property='og:url' content={projectConfig.url} />
<meta property='og:image' content={projectConfig.icons.image} />
<meta property='og:description' content={projectConfig.description} />
<meta
property='og:locale'
content={SEOConfig.defaultLocale?.concat(
'_',
SEOConfig.defaultLocale.toUpperCase()
)}
content={`${
projectConfig.defaultLocale
}_${projectConfig.defaultLocale.toUpperCase()}`}
/>
<meta property='og:site_name' content={longName} />
<meta property='og:site_name' content={projectConfig.longName} />
{/* Twitter card Metadata */}
<meta name='twitter:card' content='summary' />
<meta name='twitter:description' content={description} />
<meta name='twitter:title' content={longName} />
<meta name='twitter:image:src' content={icons?.image} />
<meta name='twitter:description' content={projectConfig.description} />
<meta name='twitter:title' content={projectConfig.longName} />
<meta name='twitter:image:src' content={projectConfig.icons.image} />
</Head>
)
}

137
package.json
View File

@ -1,8 +1,24 @@
{
"name": "next-app-boilerplate",
"version": "1.0.1",
"private": true,
"version": "0.0.0-development",
"license": "MIT",
"keywords": [
"template",
"tailwindcss",
"tsx",
"jsx",
"plopjs",
"fontsource",
"next-translate",
"nextjs",
"react",
"semantic-release",
"husky"
],
"author": {
"name": "Walid",
"url": "https://walidkorchi.com"
},
"scripts": {
"dev": "next dev",
"build": "next build",
@ -10,64 +26,51 @@
"check-types": "tsc --noemit",
"lint:next": "next lint",
"lint:editorconfig": "editorconfig-checker",
"lint:prettier": "prettier \".\" --check --ignore-unknown '!**/*.hbs' --ignore-path \".gitignore\"",
"lint:prettier": "prettier \".\" --check",
"lint:commit": "commitlint",
"lint:staged": "lint-staged",
"release": "semantic-release",
"generate": "plop"
},
"dependencies": {
"@fontsource/open-sans": "^4.5.14",
"classnames": "^2.3.2",
"@fontsource/open-sans": "^4.5.11",
"classnames": "^2.3.1",
"js-cookie": "^3.0.1",
"next": "^13.1.6",
"next-translate": "^1.6.0",
"next": "^12.2.5",
"next-translate": "^1.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@commitlint/cli": "^17.4.2",
"@commitlint/config-conventional": "^17.4.2",
"@semantic-release/changelog": "^6.0.2",
"@semantic-release/git": "^10.0.1",
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@types/js-cookie": "^3.0.2",
"@types/node": "18.13.0",
"@types/react": "18.0.27",
"@walidoux/eslint-config": "^1.0.2",
"@walidoux/prettier-config": "^1.0.1",
"autoprefixer": "^10.4.13",
"editorconfig-checker": "^5.0.1",
"eslint": "^8.33.0",
"husky": "^8.0.3",
"nano-staged": "^0.8.0",
"plop": "^3.1.2",
"postcss": "^8.4.21",
"prettier": "^2.8.4",
"prettier-plugin-tailwindcss": "^0.2.2",
"eslint-config-next": "13.1.6",
"react-icons": "^4.7.1",
"semantic-release": "^20.1.0",
"tailwindcss": "^3.2.6",
"typescript": "^4.9.5"
},
"keywords": [
"boilerplate",
"nextjs",
"react",
"typescript",
"tsx",
"tailwindcss",
"jsx",
"plopjs",
"fontsource",
"next-translate",
"conventional-commit",
"semantic-release",
"husky"
],
"author": {
"name": "Walidoux",
"email": "contact@walidkorchi.com",
"url": "https://walidkorchi.com"
"@types/node": "18.7.2",
"@types/react": "18.0.17",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.8",
"editorconfig-checker": "^4.0.2",
"eslint": "^8.21.0",
"eslint-config-next": "12.2.5",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-unicorn": "^43.0.2",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"plop": "^3.1.1",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"react-icons": "^4.4.0",
"semantic-release": "^19.0.3",
"tailwindcss": "^3.1.8",
"typescript": "^4.7.4"
},
"repository": {
"type": "git",
@ -80,36 +83,8 @@
"publishConfig": {
"access": "public"
},
"prettier": "@walidoux/prettier-config",
"eslintConfig": {
"extends": [
"@walidoux/eslint-config"
],
"ignorePatterns": [
"out",
"**/*.config.js",
"**/*.d.ts",
"plopfile.js"
],
"rules": {
"@next/next/no-img-element": "off"
}
},
"husky": {
"hooks": {
"pre-commit": "nano-staged"
}
},
"nano-staged": {
"*": [
"editorconfig-checker"
],
"**/*.js": [
"eslint --fix",
"prettier --ignore-path .eslintignore --write"
],
"**/*.{json,md,yml}": [
"prettier --ignore-path .eslintignore --write"
]
}
"private": true,
"branches": [
"master"
]
}

1
pages/_app.tsx
View File

@ -10,6 +10,7 @@ import { useEffect } from 'react'
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
const { lang } = useTranslation()
// 10 years before cookie's expiration
const COOKIE_EXPIRATION = 10 * 365.25 * 24 * 60 * 60
useEffect(() => {

24
pages/index.tsx
View File

@ -3,32 +3,28 @@ import type { NextPage } from 'next'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import { FiGithub } from 'react-icons/fi'
import { Fragment } from 'react'
const Home: NextPage = () => {
const { t } = useTranslation()
return (
<Fragment>
<main className='flex min-h-screen max-w-full flex-col items-center justify-center bg-gradient-to-br from-primary to-secondary'>
<NextHead />
<main className='flex min-h-screen max-w-full flex-col items-center justify-center bg-gradient-to-br from-primary to-secondary'>
<p className='px-3 text-center text-4xl italic text-white'>
{t('home:title')}
</p>
<span className='mt-3 px-3 text-center text-lg italic text-white/90'>
<p className='px-3 text-center text-4xl italic text-white'>
{t('home:title')} <br />
<span className='px-3 text-center text-lg italic text-white opacity-90'>
{t('home:subtitle')}
</span>
</p>
<Link
target='_blank'
href='https://github.com/Walidoux/next-app-boilerplate'
className='mt-7 flex cursor-pointer items-center justify-center rounded-xl border-none bg-white/80 bg-none py-[10px] px-6 font-semibold text-black no-underline outline-none transition duration-300 hover:bg-black/50 hover:text-white'>
<Link href='https://github.com/Walidoux/next-app-boilerplate'>
<a className='mt-7 flex cursor-pointer items-center justify-center rounded-xl border-none bg-white bg-none py-[10px] px-6 font-semibold text-black no-underline outline-none transition duration-300 hover:bg-black hover:text-white'>
<FiGithub fontSize={20} />
<span className='ml-3'>{t('common:repo-github')}</span>
</Link>
</main>
</Fragment>
</a>
</Link>
</main>
)
}

8
types/config.ts → types/projectConfig.ts
View File

@ -1,4 +1,4 @@
type SEOKeys =
type PCKeys =
| 'shortName'
| 'longName'
| 'description'
@ -7,6 +7,8 @@ type SEOKeys =
| 'defaultLocale'
type PCIconsKeys = 'default' | 'image' | 'apple' | '16_16' | '32_32'
export interface SEODefaultValues extends Partial<Record<SEOKeys, string>> {
icons?: Record<PCIconsKeys, string>
type PCProps = Record<PCKeys, string>
export interface PCDefaultValues extends PCProps {
icons: Record<PCIconsKeys, string>
}

15
utils/config.ts
View File

@ -1,12 +1,11 @@
import { SEODefaultValues } from 'types/config'
import { PCDefaultValues } from 'types/projectConfig'
export const PROJECT_NAME = 'Boilerplate'
export const SEOConfig: SEODefaultValues = {
shortName: PROJECT_NAME,
longName: `Next.Js ${PROJECT_NAME}`,
description: `My Next.JS ${PROJECT_NAME} with TS - Tailwind CSS and much more.`,
url: 'https://next-app-boilerplate.vercel.app/',
export const projectConfig: PCDefaultValues = {
shortName: 'Boilerplate',
longName: 'Next.Js Boilerplate',
description:
'The latest Next.js boilerplate starter code/time saver with Typescript / SCSS. Including linters such as: Prettier, Eslint and Stylelint.',
url: 'Unknown project url',
defaultLocale: 'en',
color: '#775aaa',
icons: {

3043
yarn.lock
View File

File diff suppressed because it is too large Load Diff