Skip to content

Commit cbf9bc4

Browse files
tom-leamontom-leamon
committedAug 25, 2022
Add custom _document.tsx for proper styled components SSR
0 parents  commit cbf9bc4

15 files changed

+3505
-0
lines changed
 

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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.tsx`. 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.ts`.
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.

‎components/NonSSRWrapper.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import dynamic from 'next/dynamic'
2+
import React from 'react'
3+
const NonSSRWrapper = (props : any) => (
4+
<React.Fragment>{props.children}</React.Fragment>
5+
)
6+
export default dynamic(() => Promise.resolve(NonSSRWrapper), {
7+
ssr: false
8+
})

‎next.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
swcMinify: true,
5+
compiler: {
6+
styledComponents: true
7+
}
8+
}
9+
10+
module.exports = nextConfig

‎package.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "formation-test",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint",
10+
"fresh": "yarn remove @avsync.live/formation && rm -rf ./node_modules/@avsync.live/formation"
11+
},
12+
"dependencies": {
13+
"@avsync.live/formation": "file:../formation/avsync.live-formation-0.9.12.tgz",
14+
"@fortawesome/fontawesome-svg-core": "^6.1.2",
15+
"@types/styled-components": "^5.1.26",
16+
"next": "12.2.5",
17+
"react": "18.2.0",
18+
"react-dom": "18.2.0",
19+
"styled-components": "^5.3.5"
20+
},
21+
"devDependencies": {
22+
"@types/node": "18.7.8",
23+
"@types/react": "18.0.17",
24+
"@types/react-dom": "18.0.6",
25+
"@zeit/next-css": "^1.0.1",
26+
"babel-plugin-styled-components": "^2.0.7",
27+
"eslint": "8.22.0",
28+
"eslint-config-next": "12.2.5",
29+
"typescript": "4.7.4"
30+
}
31+
}

‎pages/_app.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { AppProps } from 'next/app'
2+
import React from 'react'
3+
4+
import '@avsync.live/formation/dist/index.dark.css'
5+
6+
// fontawesome
7+
import '@fortawesome/fontawesome-svg-core/styles.css'
8+
import { library, config } from '@fortawesome/fontawesome-svg-core'
9+
import * as far from '@fortawesome/free-regular-svg-icons'
10+
import * as fas from '@fortawesome/free-solid-svg-icons'
11+
library.add(
12+
// regular
13+
far.faHeart, far.faPaperPlane, far.faCheckSquare, far.faSquare,
14+
fas.faEnvelope,
15+
16+
// solid
17+
fas.faInfoCircle, fas.faBars, fas.faHeart, fas.faPlus,
18+
fas.faEllipsisV, fas.faPaperPlane, fas.faCalendarAlt,
19+
fas.faArrowRight, fas.faArrowLeft, fas.faClock, fas.faSearch,
20+
fas.faSortAlphaUp, fas.faSortAlphaDown, fas.faFilter,
21+
fas.faChevronCircleRight, fas.faChevronCircleLeft, fas.faEnvelope,
22+
fas.faCheck, fas.faExclamationTriangle
23+
)
24+
25+
config.autoAddCss = false
26+
27+
const App = ({ Component, pageProps }: AppProps) => {
28+
return <Component {...pageProps} />
29+
}
30+
31+
export default App

‎pages/_document.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Document, { Html, Head, Main, NextScript } from 'next/document'
2+
import { ServerStyleSheet } from 'styled-components'
3+
4+
class MyDocument extends Document {
5+
static async getInitialProps(ctx : any) {
6+
const sheet = new ServerStyleSheet()
7+
const originalRenderPage = ctx.renderPage
8+
9+
try {
10+
ctx.renderPage = () =>
11+
originalRenderPage({
12+
enhanceApp: (App: any) => (props: any) =>
13+
sheet.collectStyles(<App {...props} />)
14+
})
15+
16+
const initialProps = await Document.getInitialProps(ctx)
17+
return {
18+
...initialProps,
19+
styles: (<>
20+
{ initialProps.styles }
21+
{ sheet.getStyleElement() }
22+
</>)
23+
}
24+
} finally {
25+
sheet.seal()
26+
}
27+
}
28+
29+
render() {
30+
return (
31+
<Html>
32+
<Head />
33+
<body>
34+
<Main />
35+
<NextScript />
36+
</body>
37+
</Html>
38+
)
39+
}
40+
}
41+
42+
export default MyDocument

‎pages/api/hello.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
import type { NextApiRequest, NextApiResponse } from 'next'
3+
4+
type Data = {
5+
name: string
6+
}
7+
8+
export default function handler(
9+
req: NextApiRequest,
10+
res: NextApiResponse<Data>
11+
) {
12+
res.status(200).json({ name: 'John Doe' })
13+
}

‎pages/index.tsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import type { NextPage } from 'next'
2+
import Head from 'next/head'
3+
4+
import {
5+
Navigation
6+
} from '@avsync.live/formation'
7+
8+
const Home: NextPage = () => {
9+
return (
10+
<div>
11+
<Head>
12+
<title>Formation Next Example</title>
13+
<meta name="description" content="This Next.js app was made using Formation" />
14+
<link rel="icon" href="/favicon.ico" />
15+
</Head>
16+
17+
<Navigation
18+
navLogoSrc={'https://avsync-live.github.io/formation/static/media/logo-white.ec140047.svg'}
19+
navs={[
20+
{
21+
type: 'nav',
22+
name: 'Home',
23+
icon: 'info-circle',
24+
href: '/'
25+
},
26+
{
27+
type: 'nav',
28+
name: 'Scenes',
29+
icon: 'info-circle',
30+
href: '/scenes',
31+
toolTipTitle: 'Browse scenes to build your playlist'
32+
},
33+
{
34+
type: 'clickNav',
35+
name: 'Deck',
36+
toolTipTitle: 'Perform live music visuals with the scenes in your playlist',
37+
icon: 'info-circle',
38+
href: '/app',
39+
active: false,
40+
onClick: ()=> {
41+
42+
}
43+
},
44+
{
45+
type: 'nav',
46+
name: 'Mosh',
47+
icon: 'info-circle',
48+
href: '/mosh',
49+
toolTipTitle: 'Datamosh video files'
50+
},
51+
{
52+
type: 'spacer'
53+
},
54+
{
55+
type: 'title',
56+
title: 'Learn'
57+
},
58+
{
59+
type: 'nav',
60+
name: 'Tutorials',
61+
icon: 'info-circle',
62+
href: '/tutorials',
63+
toolTipTitle: 'Learn how to create, perform, and share live music visuals'
64+
},
65+
{
66+
type: 'nav',
67+
name: 'FAQ',
68+
icon: 'info-circle',
69+
href: '/faq',
70+
toolTipTitle: 'Get answers about AVsync.LIVE'
71+
},
72+
{
73+
type: 'nav',
74+
name: 'Contact Us',
75+
icon: 'info-circle',
76+
toolTipTitle: 'Contact us on Facebook Messenger, Instagram, or Discord',
77+
onClick: () => {
78+
}
79+
}
80+
]}
81+
>
82+
</Navigation>
83+
</div>
84+
)
85+
}
86+
87+
export default Home

‎public/favicon.ico

25.3 KB
Binary file not shown.

‎public/vercel.svg

+4
Loading

‎styles/globals.css

Whitespace-only changes.

‎tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": true,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

‎yarn.lock

+3,186
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.