├── .env ├── styles ├── pages │ ├── index.module.scss │ └── about.module.scss ├── fonts.scss ├── utils.scss ├── vars.scss ├── base.scss └── reset.scss ├── .npmrc ├── jsconfig.json ├── components ├── component │ ├── index.module.scss │ └── index.js ├── link │ └── index.js └── transition │ └── index.js ├── public ├── favicon.ico └── vercel.svg ├── .prettierrc ├── .vscode └── settings.json ├── .eslintrc.json ├── next.config.js ├── .gitignore ├── package.json ├── hooks ├── useWindowSize.js └── useFoucFix.js ├── pages ├── _app.js ├── index.js └── about.js ├── README.md ├── pnpm-lock.yaml └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/pages/index.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | @antinomy-studio:registry=https://npm.pkg.github.com 2 | -------------------------------------------------------------------------------- /styles/pages/about.module.scss: -------------------------------------------------------------------------------- 1 | .test { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "." 4 | } 5 | } -------------------------------------------------------------------------------- /components/component/index.module.scss: -------------------------------------------------------------------------------- 1 | .component { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antinomystudio/next/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true, 5 | "source.fixAll.format": true 6 | } 7 | } -------------------------------------------------------------------------------- /styles/fonts.scss: -------------------------------------------------------------------------------- 1 | // @font-face { 2 | // font-family: ''; 3 | // font-weight: 400; 4 | // src: url('/fonts/Font.woff2') format('woff2'), 5 | // url('/fonts/Font.woff') format('woff'); 6 | // font-display: swap; 7 | // } -------------------------------------------------------------------------------- /styles/utils.scss: -------------------------------------------------------------------------------- 1 | .u-overflow { 2 | overflow: hidden; 3 | } 4 | 5 | .u-abs { 6 | position: absolute; 7 | inset: 0; 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | .u-center { 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | -------------------------------------------------------------------------------- /components/component/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames' 2 | import { Link } from 'components/link' 3 | import styles from './index.module.scss' 4 | 5 | export function Component() { 6 | return ( 7 | 8 | Component 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next", 4 | "prettier", 5 | "eslint:recommended", 6 | "plugin:react/recommended" 7 | ], 8 | "rules": { 9 | "react/prop-types": "off", 10 | "react/react-in-jsx-scope": "off", 11 | "react-hooks/exhaustive-deps": "off" 12 | }, 13 | "env": { 14 | "node": true, 15 | "browser": true, 16 | "es6": true 17 | } 18 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const nextConfig = { 4 | reactStrictMode: true, 5 | swcMinify: true, 6 | webpack: (config) => { 7 | config.resolve.alias.g = path.join(__dirname, 'styles/base.scss'); 8 | return config; 9 | }, 10 | sassOptions: { 11 | includePaths: [path.join(__dirname, 'styles')], 12 | prependData: `@import 'styles/vars.scss';` 13 | } 14 | } 15 | 16 | module.exports = nextConfig 17 | -------------------------------------------------------------------------------- /.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /components/link/index.js: -------------------------------------------------------------------------------- 1 | import NextLink from 'next/link' 2 | 3 | export function Link({ href, children, className, ...rest }) { 4 | if (typeof href === 'string' && href.startsWith('http')) { 5 | return ( 6 | 7 | {children} 8 | 9 | ); 10 | } 11 | 12 | return ( 13 | 14 | {children} 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "classnames": "^2.3.1", 13 | "gsap": "^3.10.4", 14 | "next": "12.2.2", 15 | "react": "18.2.0", 16 | "react-dom": "18.2.0" 17 | }, 18 | "devDependencies": { 19 | "eslint": "8.20.0", 20 | "eslint-config-next": "12.2.2", 21 | "eslint-config-prettier": "^8.5.0", 22 | "sass": "^1.53.0" 23 | } 24 | } -------------------------------------------------------------------------------- /hooks/useWindowSize.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | function useWindowSize() { 4 | const [windowSize, setWindowSize] = useState({ 5 | width: undefined, 6 | height: undefined, 7 | }) 8 | 9 | useEffect(() => { 10 | function onResize() { 11 | setWindowSize({ 12 | width: window.innerWidth, 13 | height: window.innerHeight, 14 | }) 15 | } 16 | 17 | window.addEventListener("resize", onResize) 18 | 19 | onResize() 20 | 21 | return () => window.removeEventListener("resize", onResize) 22 | }, []) 23 | 24 | return windowSize 25 | } 26 | 27 | export default useWindowSize -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import useFoucFix from '/hooks/useFoucFix' 3 | import Transition from 'components/transition' 4 | 5 | import '../styles/base.scss' 6 | 7 | function App({ Component, pageProps }) { 8 | useFoucFix() 9 | 10 | return ( 11 | <> 12 | 13 | Next @ Antinomy Studio 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | } 22 | 23 | export default App 24 | -------------------------------------------------------------------------------- /styles/vars.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | /* 4 | * Fonts 5 | */ 6 | $helvetica: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 7 | $font: $helvetica; 8 | 9 | /* 10 | * Sizes 11 | */ 12 | @function px($size) { 13 | @return math.div($size, 16) * 1rem; 14 | } 15 | 16 | /* 17 | * Breakpoints 18 | */ 19 | $xs: px(320); 20 | $sm: px(700); 21 | $md: px(1024); 22 | $lg: px(1800); 23 | 24 | @mixin res($class) { 25 | @if $class ==xs { 26 | @media (min-width: $xs) { 27 | @content; 28 | } 29 | } 30 | 31 | @else if $class ==sm { 32 | @media (min-width: $sm) { 33 | @content; 34 | } 35 | } 36 | 37 | @else if $class ==md { 38 | @media (min-width: $md) { 39 | @content; 40 | } 41 | } 42 | 43 | @else if $class ==lg { 44 | @media (min-width: $lg) { 45 | @content; 46 | } 47 | } 48 | 49 | @else { 50 | @warn "responsive mixin supports: xs, sm, md, lg"; 51 | } 52 | } -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /styles/base.scss: -------------------------------------------------------------------------------- 1 | @import 'fonts.scss'; 2 | @import 'reset.scss'; 3 | @import 'utils.scss'; 4 | 5 | :root { 6 | --layout-margin: 25px; 7 | 8 | @include res('sm') { 9 | --layout-margin: 45px; 10 | } 11 | } 12 | 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: border-box; 17 | margin: 0; 18 | -webkit-tap-highlight-color: transparent; 19 | } 20 | 21 | html { 22 | font-family: $font; 23 | font-size: 100%; 24 | user-select: none; 25 | -ms-text-size-adjust: 100%; 26 | -webkit-text-size-adjust: 100%; 27 | -moz-osx-font-smoothing: grayscale; 28 | -webkit-font-smoothing: antialiased; 29 | box-sizing: border-box; 30 | font-feature-settings: 'liga' off; 31 | overscroll-behavior: none; 32 | 33 | &.--locked { 34 | overflow: hidden; 35 | } 36 | 37 | &.--progress { 38 | cursor: progress; 39 | 40 | * { 41 | cursor: progress; 42 | } 43 | } 44 | } 45 | 46 | body { 47 | font-size: 16px; 48 | font-size: 1.6rem; 49 | line-height: 1.25rem; 50 | overscroll-behavior: none; 51 | } 52 | 53 | #__next, 54 | .page { 55 | position: relative; 56 | min-height: 100vh; 57 | } 58 | 59 | .page { 60 | display: block; 61 | width: 100%; 62 | } 63 | 64 | .main { 65 | max-width: 960px; 66 | margin: 0 auto; 67 | } 68 | 69 | .grid { 70 | display: grid; 71 | } 72 | 73 | h1 { 74 | margin: 70px 0 0; 75 | } 76 | 77 | p { 78 | margin: 40px 0; 79 | } 80 | 81 | img { 82 | width: 100%; 83 | height: auto; 84 | } 85 | 86 | h1 { 87 | line-height: 1.5; 88 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /hooks/useFoucFix.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | 3 | // Temporary fix to avoid flash of unstyled content (FOUC) during route transitions. 4 | // Keep an eye on this issue and remove this code when resolved: https://github.com/vercel/next.js/issues/17464 5 | const useFoucFix = () => 6 | useEffect(() => { 7 | // Gather all server-side rendered stylesheet entries. 8 | let stylesheets = Array.from(document.querySelectorAll('link[rel="stylesheet"][data-n-p]')).map( 9 | (element) => ({ 10 | element, 11 | href: element.getAttribute('href') 12 | }) 13 | ) 14 | 15 | // Remove the `data-n-p` attribute to prevent Next.js from removing it early. 16 | stylesheets.forEach(({ element }) => element.removeAttribute('data-n-p')) 17 | 18 | const hrefs = [] 19 | 20 | const mutationHandler = (mutations) => { 21 | // Gather all