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: on:
push: push:
branches: [main] branches: [master]
jobs: jobs:
build-release: build-release:
@ -15,7 +15,7 @@ jobs:
- name: Use Node.js - name: Use Node.js
uses: actions/setup-node@v3.1.1 uses: actions/setup-node@v3.1.1
with: with:
node-version: 18.x node-version: 16.x
- name: Install dependencies - name: Install dependencies
run: yarn --frozen-lockfile run: yarn --frozen-lockfile

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

@ -2,7 +2,9 @@ name: 'Lint'
on: on:
push: push:
branches: [main] branches: [develop]
pull_request:
branches: [master, develop]
jobs: jobs:
build: build:
@ -15,7 +17,7 @@ jobs:
- name: Use Node.js - name: Use Node.js
uses: actions/setup-node@v3.1.1 uses: actions/setup-node@v3.1.1
with: with:
node-version: 18.x node-version: 16.x
- name: Install dependencies - name: Install dependencies
run: yarn --frozen-lockfile 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": [ "branches": [
"main" "master"
], ],
"plugins": [ "plugins": [
[ [
"@semantic-release/commit-analyzer", "@semantic-release/commit-analyzer",
{ {
"preset": "conventionalcommits", "preset": "conventionalcommits"
"parserOpts": {
"noteKeywords": [
"BREAKING CHANGE",
"BREAKING CHANGES"
]
}
} }
], ],
[ [
@ -21,14 +15,7 @@
"preset": "conventionalcommits" "preset": "conventionalcommits"
} }
], ],
[
"@semantic-release/changelog",
{
"changelogFile": "CHANGELOG.md"
}
],
"@semantic-release/npm", "@semantic-release/npm",
"@semantic-release/git",
"@semantic-release/github" "@semantic-release/github"
] ]
} }

2
.vscode/settings.json vendored
View File

@ -1,7 +1,9 @@
{ {
"typescript.enablePromptUseWorkspaceTsdk": true, "typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": "node_modules/typescript/lib", "typescript.tsdk": "node_modules/typescript/lib",
"prettier.configPath": ".prettierrc",
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.bracketPairColorization.enabled": true,
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll": true "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. ⚙️ 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). 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 Head from 'next/head'
import type { SEODefaultValues } from 'types/config' import { projectConfig } from 'utils/config'
import { SEOConfig } 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 ( return (
<Head> <Head>
<title>{shortName}</title> <title>{title}</title>
<link rel='shortcut icon' href={icons?.default} type='image/x-icon' /> <link
<link rel='apple-touch-icon' sizes='180x180' href={icons?.apple} /> rel='shortcut icon'
<link rel='icon' type='image/png' sizes='16x16' href={icons?.['16_16']} /> href={projectConfig.icons.default}
<link rel='icon' type='image/png' sizes='32x32' href={icons?.['32_32']} /> 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 */} {/* 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='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='description' content={description} /> <meta name='description' content={projectConfig.description} />
<meta name='language' content={defaultLocale} /> <meta name='language' content={projectConfig.defaultLocale} />
<meta name='theme-color' content={color} /> <meta name='theme-color' content={projectConfig.color} />
<meta name='copyright' content={shortName} /> <meta name='copyright' content={projectConfig.shortName} />
<meta name='author' content={shortName} /> <meta name='author' content={projectConfig.shortName} />
<meta name='publisher' content={shortName} /> <meta name='publisher' content={projectConfig.shortName} />
<meta name='robots' content='index, follow' /> <meta name='robots' content='index, follow' />
<meta name='rating' content='general' /> <meta name='rating' content='general' />
<meta name='distribution' content='global' /> <meta name='distribution' content='global' />
<meta name='msapplication-TileColor' content={color} /> <meta name='msapplication-TileColor' content={projectConfig.color} />
{/* Open graph MT */} {/* 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:type' content='website' />
<meta property='og:url' content={url} /> <meta property='og:url' content={projectConfig.url} />
<meta property='og:image' content={icons?.image} /> <meta property='og:image' content={projectConfig.icons.image} />
<meta property='og:description' content={description} /> <meta property='og:description' content={projectConfig.description} />
<meta <meta
property='og:locale' property='og:locale'
content={SEOConfig.defaultLocale?.concat( content={`${
'_', projectConfig.defaultLocale
SEOConfig.defaultLocale.toUpperCase() }_${projectConfig.defaultLocale.toUpperCase()}`}
)}
/> />
<meta property='og:site_name' content={longName} /> <meta property='og:site_name' content={projectConfig.longName} />
{/* Twitter card Metadata */} {/* Twitter card Metadata */}
<meta name='twitter:card' content='summary' /> <meta name='twitter:card' content='summary' />
<meta name='twitter:description' content={description} /> <meta name='twitter:description' content={projectConfig.description} />
<meta name='twitter:title' content={longName} /> <meta name='twitter:title' content={projectConfig.longName} />
<meta name='twitter:image:src' content={icons?.image} /> <meta name='twitter:image:src' content={projectConfig.icons.image} />
</Head> </Head>
) )
} }

137
package.json
View File

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

1
pages/_app.tsx
View File

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

24
pages/index.tsx
View File

@ -3,32 +3,28 @@ import type { NextPage } from 'next'
import Link from 'next/link' import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation' import useTranslation from 'next-translate/useTranslation'
import { FiGithub } from 'react-icons/fi' import { FiGithub } from 'react-icons/fi'
import { Fragment } from 'react'
const Home: NextPage = () => { const Home: NextPage = () => {
const { t } = useTranslation() const { t } = useTranslation()
return ( 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 /> <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'>
<p className='px-3 text-center text-4xl italic text-white'> {t('home:title')} <br />
{t('home:title')} <span className='px-3 text-center text-lg italic text-white opacity-90'>
</p>
<span className='mt-3 px-3 text-center text-lg italic text-white/90'>
{t('home:subtitle')} {t('home:subtitle')}
</span> </span>
</p>
<Link <Link href='https://github.com/Walidoux/next-app-boilerplate'>
target='_blank' <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'>
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'>
<FiGithub fontSize={20} /> <FiGithub fontSize={20} />
<span className='ml-3'>{t('common:repo-github')}</span> <span className='ml-3'>{t('common:repo-github')}</span>
</Link> </a>
</main> </Link>
</Fragment> </main>
) )
} }

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

@ -1,4 +1,4 @@
type SEOKeys = type PCKeys =
| 'shortName' | 'shortName'
| 'longName' | 'longName'
| 'description' | 'description'
@ -7,6 +7,8 @@ type SEOKeys =
| 'defaultLocale' | 'defaultLocale'
type PCIconsKeys = 'default' | 'image' | 'apple' | '16_16' | '32_32' type PCIconsKeys = 'default' | 'image' | 'apple' | '16_16' | '32_32'
export interface SEODefaultValues extends Partial<Record<SEOKeys, string>> { type PCProps = Record<PCKeys, string>
icons?: Record<PCIconsKeys, 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 projectConfig: PCDefaultValues = {
shortName: 'Boilerplate',
export const SEOConfig: SEODefaultValues = { longName: 'Next.Js Boilerplate',
shortName: PROJECT_NAME, description:
longName: `Next.Js ${PROJECT_NAME}`, 'The latest Next.js boilerplate starter code/time saver with Typescript / SCSS. Including linters such as: Prettier, Eslint and Stylelint.',
description: `My Next.JS ${PROJECT_NAME} with TS - Tailwind CSS and much more.`, url: 'Unknown project url',
url: 'https://next-app-boilerplate.vercel.app/',
defaultLocale: 'en', defaultLocale: 'en',
color: '#775aaa', color: '#775aaa',
icons: { icons: {

3043
yarn.lock
View File

File diff suppressed because it is too large Load Diff