├── .eslintrc.json ├── .gitignore ├── .husky └── pre-commit ├── .lintstagedrc.js ├── .prettierignore ├── .prettierrc.json ├── .stylelintrc.json ├── .yarnrc.yml ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── public ├── favicon.ico └── vercel.svg ├── src ├── components │ └── CardLearn.tsx ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx └── styles │ ├── Home.module.scss │ └── globals.css ├── tsconfig.json └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "next/core-web-vitals", "next", "prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | .yarn 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | .pnpm-debug.log* 28 | 29 | # local env files 30 | .env*.local 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged -c .lintstagedrc.js 5 | -------------------------------------------------------------------------------- /.lintstagedrc.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const buildEslintCommand = (filenames) => 4 | `next lint --fix --file ${filenames 5 | .map((f) => path.relative(process.cwd(), f)) 6 | .join(' --file ')}` 7 | 8 | module.exports = { 9 | '*.{ts,tsx}': [buildEslintCommand, 'prettier --write'], 10 | '*.{css,scss}': 'stylelint --fix', 11 | } 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | .next 3 | node_modules -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard-scss", 4 | "stylelint-config-prettier-scss", 5 | "stylelint-config-standard", 6 | "stylelint-config-prettier", 7 | "stylelint-config-rational-order" 8 | ], 9 | "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"], 10 | "rules": { 11 | "order/properties-order": [], 12 | "plugin/rational-order": [ 13 | true, 14 | { 15 | "border-in-box-model": true, 16 | "empty-line-between-groups": true 17 | } 18 | ] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js With Material UI Example Template 2 | 3 | This example template was scaffolded using [nextjs-with-typescript-example-template](https://github.com/binodnepali/nextjs-with-typescript-example-template). 4 | 5 | ## Before getting started 6 | 7 | Make sure you have installed [Node.js 12.22.0 or higher](https://nodejs.org/en/) on your machine. You can use [nvm](https://github.com/nvm-sh/nvm) to manage multiple node version on your machine. 8 | 9 | ## Getting started 10 | 11 | You can setup this project using npm or yarn package managers. 12 | 13 | > I would recommend to installed or enabled [yarn](https://yarnpkg.com/getting-started) 1.22.15 or higher on your machine. 14 | 15 | ### Clone repo 16 | 17 | ```bash 18 | git clone https://github.com/binodnepali/nextjs-with-material-ui-example-template.git 19 | #or 20 | git clone git@github.com:binodnepali/nextjs-with-material-ui-example-template.git 21 | ``` 22 | 23 | ### Navigate to cloned repo 24 | 25 | ```bash 26 | cd nextjs-with-material-ui-example-template 27 | ``` 28 | 29 | ### Install dependencies 30 | 31 | ```bash 32 | yarn install 33 | #or 34 | npm install 35 | ``` 36 | 37 | ### Start development server 38 | 39 | ```bash 40 | yarn dev 41 | #or 42 | npm run dev 43 | ``` 44 | 45 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 46 | 47 | ### Build for production 48 | 49 | ```bash 50 | yarn build 51 | #or 52 | npm run build 53 | ``` 54 | 55 | ### Start preview server after build 56 | 57 | ```bash 58 | yarn start 59 | #or 60 | npm run start 61 | ``` 62 | 63 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 64 | 65 | ### Run release 66 | 67 | Follow the [Conventional Commits Specification](https://www.conventionalcommits.org/en/v1.0.0/) in your repository. And when you're ready to release, run below scripts. 68 | 69 | ```bash 70 | yarn release 71 | #or 72 | npm run release 73 | ``` 74 | 75 | ## Learn More 76 | 77 | To learn more about Next.js, ESLint, Prettier, StyleLint and lint-staged, take a look at the following resources: 78 | 79 | * [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API 80 | * [Next.js ESLint](https://nextjs.org/docs/basic-features/eslint) - Learn about how to Next.js ESLint setup 81 | * [Prettier Setup](https://prettier.io/docs/en/install.html) - Learn about how to setup prettier 82 | * [Prettier Integrations](https://prettier.io/docs/en/related-projects.html) - Learn about how to setup prettier with other tools 83 | * [ESLint Setup](https://eslint.org/docs/user-guide/getting-started) - Learn about how to ESLint 84 | * [StyleLint Setup](https://stylelint.io/user-guide/get-started) - Learn about how to setup StyleLint 85 | * [Lint Staged Setup](https://github.com/okonet/lint-staged) - Learn about how to setup lint-staged 86 | * [Standard Version](https://github.com/conventional-changelog/standard-version) - Learn about how to setup standar version 87 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-with-material-ui-example-template", 3 | "version": "1.0.0", 4 | "private": true, 5 | "engines": { 6 | "node": ">=12.22.0" 7 | }, 8 | "scripts": { 9 | "dev": "next dev", 10 | "build": "next build", 11 | "start": "next start", 12 | "release": "standard-version", 13 | "prepare": "husky install" 14 | }, 15 | "dependencies": { 16 | "@emotion/react": "^11.9.0", 17 | "@emotion/styled": "^11.8.1", 18 | "@mui/icons-material": "^5.6.2", 19 | "@mui/material": "^5.6.2", 20 | "next": "12.1.2", 21 | "react": "17.0.2", 22 | "react-dom": "17.0.2" 23 | }, 24 | "devDependencies": { 25 | "@types/node": "17.0.23", 26 | "@types/react": "17.0.43", 27 | "@types/react-dom": "17.0.14", 28 | "eslint": "8.12.0", 29 | "eslint-config-next": "12.1.2", 30 | "eslint-config-prettier": "^8.5.0", 31 | "husky": "^7.0.4", 32 | "lint-staged": "^12.3.7", 33 | "postcss": "^8.4.12", 34 | "prettier": "2.6.2", 35 | "sass": "^1.49.11", 36 | "standard-version": "^9.3.2", 37 | "stylelint": "^14.6.1", 38 | "stylelint-config-prettier": "^9.0.3", 39 | "stylelint-config-prettier-scss": "^0.0.1", 40 | "stylelint-config-rational-order": "^0.1.2", 41 | "stylelint-config-standard": "^25.0.0", 42 | "stylelint-config-standard-scss": "^3.0.0", 43 | "stylelint-order": "^5.0.0", 44 | "typescript": "^4.6.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/binodnepali/next-with-material-ui-example-template/67f298a0ffa85579583f908ae6289b184a7c2345/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/CardLearn.tsx: -------------------------------------------------------------------------------- 1 | import Button from '@mui/material/Button' 2 | import Card from '@mui/material/Card' 3 | import CardActions from '@mui/material/CardActions' 4 | import CardContent from '@mui/material/CardContent' 5 | import Typography from '@mui/material/Typography' 6 | 7 | interface CardLearnProps { 8 | title: string 9 | description: string 10 | href: string 11 | } 12 | export const CardLearn = ({ title, description, href }: CardLearnProps) => { 13 | return ( 14 | 15 | 16 | 17 | {title} 18 | 19 | 20 | {description} 21 | 22 | 23 | 24 | 27 | 28 | 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | import type { AppProps } from 'next/app' 4 | 5 | export default function App({ Component, pageProps }: AppProps) { 6 | const AnyComponent = Component as any 7 | return 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse, 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import Grid from '@mui/material/Grid' 2 | import Head from 'next/head' 3 | import Image from 'next/image' 4 | import { CardLearn } from '../components/CardLearn' 5 | import styles from '../styles/Home.module.scss' 6 | 7 | const learningResources = [ 8 | { 9 | title: 'Documentation', 10 | description: 'Find in-depth information about Next.js features and API.', 11 | href: 'https://nextjs.org/docs', 12 | }, 13 | { 14 | title: 'Learn', 15 | description: 'Learn about Next.js in an interactive course with quizzes!', 16 | href: 'https://nextjs.org/learn', 17 | }, 18 | { 19 | title: 'Examples', 20 | description: 'Discover and deploy boilerplate example Next.js projects.', 21 | href: 'https://github.com/vercel/next.js/tree/canary/examples', 22 | }, 23 | { 24 | title: 'Deploy', 25 | description: 26 | 'Instantly deploy your Next.js site to a public URL with Vercel.', 27 | href: 'https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app', 28 | }, 29 | ] 30 | 31 | export default function HomePage() { 32 | return ( 33 |
34 | 35 | Create Next App 36 | 37 | 38 | 39 | 40 |
41 |

42 | Welcome to Next.js! 43 |

44 |

45 | Get started by editing{' '} 46 | pages/index.tsx 47 |

48 | 49 | {learningResources.map((learn, index) => ( 50 | 51 | 52 | 53 | ))} 54 | 55 |
56 | 57 | 69 |
70 | ) 71 | } 72 | -------------------------------------------------------------------------------- /src/styles/Home.module.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0 2rem; 3 | } 4 | 5 | .main { 6 | display: flex; 7 | flex: 1; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: center; 11 | min-height: 100vh; 12 | padding: 4rem 0; 13 | } 14 | 15 | .footer { 16 | display: flex; 17 | flex: 1; 18 | align-items: center; 19 | justify-content: center; 20 | padding: 2rem 0; 21 | border-top: 1px solid #eaeaea; 22 | } 23 | 24 | .footer a { 25 | display: flex; 26 | flex-grow: 1; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | .title a { 32 | color: #0070f3; 33 | text-decoration: none; 34 | } 35 | 36 | .title a:hover, 37 | .title a:focus, 38 | .title a:active { 39 | text-decoration: underline; 40 | } 41 | 42 | .title { 43 | margin: 0; 44 | font-size: 4rem; 45 | line-height: 1.15; 46 | } 47 | 48 | .title, 49 | .description { 50 | text-align: center; 51 | } 52 | 53 | .description { 54 | margin: 4rem 0; 55 | font-size: 1.5rem; 56 | line-height: 1.5; 57 | } 58 | 59 | .code { 60 | padding: 0.75rem; 61 | border-radius: 5px; 62 | font-size: 1.1rem; 63 | font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 64 | 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace; 65 | background: #fafafa; 66 | } 67 | 68 | .grid { 69 | display: flex; 70 | flex-wrap: wrap; 71 | align-items: center; 72 | justify-content: center; 73 | max-width: 800px; 74 | } 75 | 76 | .logo { 77 | height: 1em; 78 | margin-left: 0.5rem; 79 | } 80 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 6 | Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | --------------------------------------------------------------------------------