Skip to content

Instantly share code, notes, and snippets.

@edgvi10

edgvi10/commands.sh

Last active April 30, 2022 18:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save edgvi10/a64a4c8eee37587ff740a5ad40c9c591 to your computer and use it in GitHub Desktop.
Save edgvi10/a64a4c8eee37587ff740a5ad40c9c591 to your computer and use it in GitHub Desktop.
Download ZIP
NextJS project Pack
Raw
commands.sh
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
@edgvi10
Copy link
Author

edgvi10 commented Sep 1, 2021 •
edited 

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 MyDocument

api/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({});
    }
}

@edgvi10
Copy link
Author

edgvi10 commented Nov 26, 2021

#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)}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment