├── .github └── FUNDING.yml ├── src ├── styles │ ├── settings │ │ ├── __settings.scss │ │ └── _colors.scss │ ├── Home.module.scss │ └── globals.scss ├── components │ ├── Card │ │ ├── index.js │ │ ├── Card.js │ │ └── Card.module.scss │ ├── Grid │ │ ├── index.js │ │ ├── Grid.module.scss │ │ └── Grid.js │ ├── Main │ │ ├── index.js │ │ ├── Main.module.scss │ │ └── Main.js │ ├── Footer │ │ ├── index.js │ │ ├── Footer.module.scss │ │ └── Footer.js │ └── Container │ │ ├── index.js │ │ ├── Container.module.scss │ │ └── Container.js └── pages │ ├── _app.js │ ├── api │ └── hello.js │ ├── _document.js │ └── index.js ├── public ├── favicon.ico └── vercel.svg ├── .gitignore ├── .all-contributorsrc ├── package.json ├── LICENSE ├── README.md └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [colbyfayock] 2 | -------------------------------------------------------------------------------- /src/styles/settings/__settings.scss: -------------------------------------------------------------------------------- 1 | @import "colors"; -------------------------------------------------------------------------------- /src/components/Card/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Card'; -------------------------------------------------------------------------------- /src/components/Grid/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Grid'; -------------------------------------------------------------------------------- /src/components/Main/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Main'; -------------------------------------------------------------------------------- /src/styles/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $color-primary: blueviolet; -------------------------------------------------------------------------------- /src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Footer'; -------------------------------------------------------------------------------- /src/components/Container/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Container'; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colbyfayock/next-sass-starter/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.scss' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /src/components/Main/Main.module.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | padding: 5rem 0; 3 | flex: 1; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } -------------------------------------------------------------------------------- /src/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default (req, res) => { 4 | res.statusCode = 200 5 | res.json({ name: 'John Doe' }) 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Container/Container.module.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } -------------------------------------------------------------------------------- /src/components/Grid/Grid.module.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | flex-wrap: wrap; 7 | 8 | max-width: 800px; 9 | margin-top: 3rem; 10 | 11 | @media (max-width: 600px) { 12 | width: 100%; 13 | flex-direction: column; 14 | } 15 | 16 | } -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import styles from './Card.module.scss'; 2 | 3 | const Card = ({ children, className, ...rest }) => { 4 | let cardClassName = styles.card; 5 | 6 | if ( className ) { 7 | cardClassName = `${cardClassName} ${className}`; 8 | } 9 | 10 | return ( 11 |
12 | { children } 13 |
14 | ) 15 | } 16 | 17 | export default Card; -------------------------------------------------------------------------------- /src/components/Grid/Grid.js: -------------------------------------------------------------------------------- 1 | import styles from './Grid.module.scss'; 2 | 3 | const Grid = ({ children, className, ...rest }) => { 4 | let gridClassName = styles.grid; 5 | 6 | if ( className ) { 7 | gridClassName = `${gridClassName} ${className}`; 8 | } 9 | 10 | return ( 11 |
12 | { children } 13 |
14 | ) 15 | } 16 | 17 | export default Grid; -------------------------------------------------------------------------------- /src/components/Main/Main.js: -------------------------------------------------------------------------------- 1 | import styles from './Main.module.scss'; 2 | 3 | const Main = ({ children, className, ...rest }) => { 4 | let mainClassName = styles.main; 5 | 6 | if ( className ) { 7 | mainClassName = `${mainClassName} ${className}`; 8 | } 9 | 10 | return ( 11 |
12 | { children } 13 |
14 | ) 15 | } 16 | 17 | export default Main; -------------------------------------------------------------------------------- /src/components/Footer/Footer.module.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | 3 | width: 100%; 4 | height: 100px; 5 | border-top: 1px solid #eaeaea; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | 10 | img { 11 | margin-left: 0.5rem; 12 | } 13 | 14 | a { 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | } 21 | 22 | .footerLogo { 23 | height: 1em; 24 | } -------------------------------------------------------------------------------- /src/components/Container/Container.js: -------------------------------------------------------------------------------- 1 | import styles from './Container.module.scss'; 2 | 3 | const Container = ({ children, className, ...rest }) => { 4 | let containerClassName = styles.container; 5 | 6 | if ( className ) { 7 | containerClassName = `${containerClassName} ${className}`; 8 | } 9 | 10 | return ( 11 |
12 | { children } 13 |
14 | ) 15 | } 16 | 17 | export default Container; -------------------------------------------------------------------------------- /src/styles/Home.module.scss: -------------------------------------------------------------------------------- 1 | @import "./settings/__settings"; 2 | 3 | .title { 4 | 5 | margin: 0; 6 | line-height: 1.15; 7 | font-size: 4rem; 8 | 9 | a { 10 | 11 | color: $color-primary; 12 | text-decoration: none; 13 | 14 | &:hover, 15 | &:focus, 16 | &:active { 17 | text-decoration: underline; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .title, 25 | .description { 26 | text-align: center; 27 | } 28 | 29 | .description { 30 | line-height: 1.5; 31 | font-size: 1.5rem; 32 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /src/pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | class MyDocument extends Document { 4 | static async getInitialProps(ctx) { 5 | const initialProps = await Document.getInitialProps(ctx); 6 | return { ...initialProps }; 7 | } 8 | 9 | render() { 10 | return ( 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | export default MyDocument; 23 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import styles from './Footer.module.scss'; 2 | 3 | const Footer = () => { 4 | return ( 5 | 15 | ) 16 | } 17 | 18 | export default Footer; -------------------------------------------------------------------------------- /src/styles/globals.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 10 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 11 | } 12 | 13 | a { 14 | color: inherit; 15 | text-decoration: none; 16 | } 17 | 18 | code { 19 | background: #fafafa; 20 | border-radius: 5px; 21 | padding: 0.75rem; 22 | font-size: 1.1rem; 23 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 24 | Bitstream Vera Sans Mono, Courier New, monospace; 25 | } -------------------------------------------------------------------------------- /src/components/Card/Card.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/settings/__settings"; 2 | 3 | .card { 4 | 5 | margin: 1rem; 6 | flex-basis: 45%; 7 | padding: 1.5rem; 8 | text-align: left; 9 | color: inherit; 10 | text-decoration: none; 11 | border: 1px solid #eaeaea; 12 | border-radius: 10px; 13 | transition: color 0.15s ease, border-color 0.15s ease; 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | color: $color-primary; 19 | border-color: $color-primary; 20 | } 21 | 22 | h2 { 23 | margin: 0 0 1rem 0; 24 | font-size: 1.5rem; 25 | } 26 | 27 | p { 28 | margin: 0; 29 | font-size: 1.25rem; 30 | line-height: 1.5; 31 | } 32 | 33 | } -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "colbyfayock", 10 | "name": "Colby Fayock", 11 | "avatar_url": "https://avatars.githubusercontent.com/u/1045274?v=4", 12 | "profile": "https://colbyfayock.com/newsletter", 13 | "contributions": [ 14 | "code", 15 | "doc" 16 | ] 17 | }, 18 | { 19 | "login": "imadatyatalah", 20 | "name": "imad", 21 | "avatar_url": "https://avatars.githubusercontent.com/u/70093484?v=4", 22 | "profile": "https://github.com/imadatyatalah", 23 | "contributions": [ 24 | "code" 25 | ] 26 | } 27 | ], 28 | "contributorsPerLine": 7, 29 | "projectName": "next-sass-starter", 30 | "projectOwner": "colbyfayock", 31 | "repoType": "github", 32 | "repoHost": "https://github.com", 33 | "skipCi": true 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-sass-starter", 3 | "title": "Next.js Sass Starter", 4 | "description": "Use Sass to start your Next.js app with CSS superpowers!", 5 | "version": "0.1.0", 6 | "author": { 7 | "name": "Colby Fayock", 8 | "email": "hello@colbyfayock.com", 9 | "url": "https://twitter.com/colbyfayock" 10 | }, 11 | "dependencies": { 12 | "next": "10.0.7", 13 | "react": "17.0.1", 14 | "react-dom": "17.0.1", 15 | "sass": "^1.32.8" 16 | }, 17 | "keywords": [ 18 | "next", 19 | "nextjs", 20 | "next js", 21 | "sass", 22 | "scss", 23 | "css" 24 | ], 25 | "license": "MIT", 26 | "scripts": { 27 | "dev": "next dev", 28 | "build": "next build", 29 | "start": "next start" 30 | }, 31 | "homepage": "https://next-sass-starter.vercel.app", 32 | "repository": { 33 | "type": "git", 34 | "url": "https://github.com/colbyfayock/next-sass-starter" 35 | }, 36 | "bugs": { 37 | "url": "https://github.com/colbyfayock/next-sass-starter/issues" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Colby Fayock 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | 3 | import Container from '../components/Container'; 4 | import Main from '../components/Main'; 5 | import Footer from '../components/Footer'; 6 | import Grid from '../components/Grid'; 7 | import Card from '../components/Card'; 8 | 9 | import styles from '../styles/Home.module.scss' 10 | 11 | export default function Home() { 12 | return ( 13 | 14 | 15 | Create Next App 16 | 17 | 18 | 22 | 23 | 24 |
25 |

26 | Next.js Sass Starter 27 |

28 | 29 |

30 | Get started by editing pages/index.js 31 |

32 | 33 | 34 | 35 | 36 |

Documentation →

37 |

Find in-depth information about Next.js features and API.

38 | 39 | 40 | 41 | 42 | 43 |

Learn →

44 |

Learn about Next.js in an interactive course with quizzes!

45 | 46 | 47 | 48 | 49 | 50 |

Examples →

51 |

Discover and deploy boilerplate example Next.js projects.

52 | 53 | 54 | 55 | 56 | 59 |

Deploy →

60 |

Instantly deploy your Next.js site to a public URL with Vercel.

61 | 62 | 63 | 64 |
65 | 66 |