Skip to content

Instantly share code, notes, and snippets.

@edgvi10
Last active November 11, 2022 02:13
Show Gist options
  • Save edgvi10/90fab28f4bcd8aa487dcb9452275dfb7 to your computer and use it in GitHub Desktop.
Save edgvi10/90fab28f4bcd8aa487dcb9452275dfb7 to your computer and use it in GitHub Desktop.
Next.js Install Files
mkdir -p components pages public src styles components/layout components/ui pages/api public/assets public/plugins src/libs src/services
touch .env jsconfig.json next.config.js package.json
touch pages/_app.jsx pages/_document.jsx pages/index.jsx pages/api/index.js public/manifest.json src/libs/utils.js src/services/api.js styles/global.scss styles/nprogress.scss
touch components/layout/.gitkeep components/ui/.gitkeep public/assets/.gitkeep public/plugins/.gitkeep
pnpm i next react react-dom nextjs-cors dbwalker axios locutus sass nprogress

Arquivos

/package.json

{
    "name": "",
    "version": "",
    "scripts": {
        "start": "next start",
        "dev": "next dev --port=3090",
        "build": "next build"
    },
    "dependencies": {
    }
}

/.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

/jsconfig.json

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

/next.config.js

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" },
                ]
            }
        ]
    }
};

/pages/_document.jsx

import Document, { Html, Head, Main, NextScript } from "next/document";

export default 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 rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Rubik:wght@400;600&display=swap" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

/pages/_app.jsx

import Head from "next/head";
import router from "next/router";

const pkg = require("@/root/package.json");

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} />
    </>
}

/pages/_error.jsx

import Error from "next/error";

export default function MyError({ statusCode, hasGetInitialPropsRun }) {
    if (!hasGetInitialPropsRun && typeof window === "undefined") {
        return <Error statusCode={statusCode} />;
    }

    return <p>An error occurred on server</p>;
}

/pages/api/index.js

export default async (req, res) => {

    if(req.method === "GET") {

    }

    return res.status(405).json({
        message: "Method Not Allowed"
    });
}

/public/manifest.json

{
    "name": "",
    "short_name": "",
    "start_url": "/",
    "background_color": "#212121",
    "theme_color": "#212121",
    "display": "standalone",
    "icons": [
        {
            "src": "/assets/icons/192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/icons/512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

/styles/global.scss

* {
    box-sizing: border-box;
    smooth-scrolling: smooth;
}
:root {
    --primary-color: #212121;
}

/styles/nprogress.scss

#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