Skip to content

Instantly share code, notes, and snippets.

@edgvi10
Last active Apr 30, 2022
Embed
What would you like to do?
NextJS project Pack
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
@linkdevs
Copy link

linkdevs commented Aug 30, 2021

CORS

module.exports = {
    async headers() {
        return [
            {
                // matching all API routes
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "*" },
                    { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Token, AccessToken" },
                ]
            }
        ]
    }
};

PWA

const withPWA = require("next-pwa");
module.exports = withPWA({
    pwa: {
        dest: 'public',
    }
});

@linkdevs
Copy link

linkdevs commented Aug 30, 2021

Gitignore

.env*
*.log
*.lock
*-lock*

**/public/workbox-*
**/public/worker-*
**/public/sw*
**/public/fallback-*

workbox-*.json
.DS_Store
.tmp

.firebase
tmp
node_modules
.next
dist
build
logs

@linkdevs
Copy link

linkdevs commented Aug 30, 2021

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/root/*": [
                "*"
            ]
        }
    }
}

@edgvi10
Copy link
Author

edgvi10 commented Sep 1, 2021

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