-
-
Save edgvi10/a64a4c8eee37587ff740a5ad40c9c591 to your computer and use it in GitHub Desktop.
| npm i next react react-dom axios serverless-mysql md5 uuidv4 cors localforage date-fns sass | |
| mkdir public src styles | |
| mkdir public/assets src/pages src/libs src/services src/components | |
| mkdir src/components/templates src/components/layouts src/pages/api | |
| mkdir src/pages/api/frontend src/pages/api/dashboard | |
| touch next.config.js jsconfig.json .gitignore | |
| touch src/pages/_app.jsx src/pages/_document.jsx | |
| touch src/pages/api/dashboard/index.js src/pages/api/frontend/index.js | |
| touch src/services/api.js src/libs/db.js src/libs/utils.js | |
| touch public/assets/.gitkeep |
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/root/*": [
"*"
]
}
}
}
npm install nprogress
_app.jsx
import "@/styles/material-colors-vars.scss";
import "@/styles/global.scss";
import "@/styles/nprogress.css";
const pkg = require("@/root/package.json");
import { useEffect, useState } from "react";
import Head from "next/head";
import router from "next/router";
import NProgress from 'nprogress';
router.onRouteChangeStart = () => NProgress.start();
router.onRouteChangeComplete = () => NProgress.done();
router.onRouteChangeError = () => NProgress.done();
export default function MyApp({ Component, pageProps, appProps }) {
return <>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no" />
<title>{pkg.title}</title>
</Head>
<Component {...appProps} {...pageProps} />
</>
}_document.jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#212121" />
<meta name="msapplication-navbutton-color" content="#212121" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Rubik:wght@400;600&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocumentapi/index.js
export default async function handler(req, res) {
if (req.method === "PUT") {
res.status(201).json({});
}
if (req.method === "GET") {
res.status(200).json({});
}
if (req.method === "POST") {
res.status(200).json({});
}
if (req.method === "DELETE") {
res.status(204).json({});
}
}
#nprogress{pointer-events:none;display:block}#nprogress .bar{background:var(--primary-color);position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px var(--primary-color),0 0 5px var(--primary-color);opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;bottom:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:var(--primary-color);border-left-color:var(--primary-color);border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@Keyframes nprogress-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
Gitignore