." warning in dev mode
150 | if (process.env.NODE_ENV === 'development') {
151 | return (
152 |
153 | {app}
154 |
155 | )
156 | }
157 |
158 | return app
159 | }
160 |
161 | function SafeHydrate({ children }) {
162 | return (
163 |
164 | {typeof document === 'undefined' ? null : children}
165 |
166 | )
167 | }
168 |
169 | function Users() {
170 | return (
171 |
172 |
173 |
176 |
177 |
181 |
182 | )
183 | }
184 |
185 | function UserHome() {
186 | return (
187 |
188 | User index page
189 |
190 | )
191 | }
192 |
193 | function UserMe() {
194 | return (
195 |
196 | User me page.
198 | )
199 | }
200 |
201 | function UserProfile() {
202 | const params = useParams()
203 | return (
204 |
205 | User profile "{params.userId}" page
206 |
207 | )
208 | }
209 |
210 | export function getStaticProps() {
211 | return {
212 | props: {},
213 | }
214 | }
215 |
216 | /* Define the routes you want to statically render during next build here */
217 | export const getStaticPaths = async () => ({
218 | paths: [
219 | { params: { index: [] } },
220 | // Default loading view set in netlify.toml
221 | { params: { index: ['loading'] } },
222 | { params: { index: ['users'] } },
223 | { params: { index: ['foo'] } },
224 | { params: { index: ['foo', 'bar'] } },
225 | { params: { index: ['foo', 'bar', 'baz'] } },
226 | ],
227 | fallback: false,
228 | })
229 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import App, { AppProps } from 'next/app'
2 | import CustomBrowserRouter from '../router/CustomBrowserRouter'
3 | import Navigation from '../components/Navigation'
4 | import onRouteChange from '@analytics/router-utils'
5 |
6 | onRouteChange((newRoutePath) => {
7 | console.log('new route path', newRoutePath)
8 | })
9 |
10 | export default class CustomApp extends App
{
11 | render() {
12 | const { Component, pageProps } = this.props
13 | return (
14 |
15 |
18 | )
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/pages/about.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function AboutUs(props: any) {
4 | return (
5 |
6 | About us static page
7 |
8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9 | Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper.
10 | Pellentesque diam orci, sodales in blandit ut, placerat quis felis.
11 | Vestibulum at sem massa, in tempus nisi.
12 | Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat.
13 | Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti.
14 | Quisque eget massa a massa semper mollis.
15 |
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/pages/api/example.js:
--------------------------------------------------------------------------------
1 | export default function handler(req, res) {
2 | res.status(200).json({ name: 'Hello!' })
3 | }
--------------------------------------------------------------------------------
/pages/get-server-side-props.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function SSROnly(props: any) {
4 | const data = props || {}
5 | return (
6 |
7 | Using file-system route and getServerSideProps
8 |
9 | {JSON.stringify(data, null, 2)}
10 |
11 |
12 | )
13 | }
14 |
15 | export async function getServerSideProps() {
16 | return {
17 | props: {
18 | fromServer: new Date().toTimeString()
19 | },
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/pages/get-static-props.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function SSGOnly(props: any) {
4 | const data = props || {}
5 | return (
6 |
7 | Using file-system route and getStaticProps
8 |
9 | {JSON.stringify(data, null, 2)}
10 |
11 |
12 | )
13 | }
14 |
15 | export async function getStaticProps() {
16 | return {
17 | props: {
18 | fromBuildTime: new Date().toTimeString()
19 | },
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/router/CustomBrowserRouter.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react'
3 | import { Router } from 'react-router-dom'
4 | import { StaticRouter } from 'react-router-dom/server'
5 | import { createNextHistory } from './createNextHistory'
6 | import { Update } from 'history'
7 | import { MemoryHistoryInstance } from './createNextHistory'
8 |
9 | interface CustomBrowserRouterProps {
10 | asPath: string
11 | }
12 | function CustomBrowserRouter({ children, asPath }: React.PropsWithChildren) {
13 | if (process.browser) {
14 | const historyRef = React.useRef()
15 |
16 | if (historyRef.current == null) {
17 | historyRef.current = createNextHistory(asPath)
18 | historyRef.current.listen(update => dispatch(update))
19 | }
20 |
21 | const history = historyRef.current
22 |
23 | const [state, dispatch] = React.useReducer((_: Update, action: Update) => action, {
24 | action: history.action,
25 | location: history.location,
26 | })
27 |
28 | return (
29 |
30 | {children}
31 |
32 | )
33 | } else {
34 | return {children}
35 | }
36 | }
37 |
38 | export default CustomBrowserRouter
39 |
--------------------------------------------------------------------------------
/router/createNextHistory.ts:
--------------------------------------------------------------------------------
1 | import NextRouter from 'next/router'
2 | import { parsePath, createMemoryHistory, MemoryHistory, To } from 'history'
3 |
4 | interface MemoryHistoryState {
5 | shallow?: boolean
6 | locale?: string | false
7 | }
8 | export type MemoryHistoryInstance = MemoryHistory
9 |
10 | function fromReactRouterToNextUrl(to: To) {
11 | const path = typeof to === 'string' ? parsePath(to) : to
12 | const nextPath = {
13 | hash: path.hash,
14 | pathname: path.pathname,
15 | search: path.search,
16 | }
17 | return nextPath
18 | }
19 |
20 | export function createNextHistory(asPath: string): MemoryHistoryInstance {
21 | const historyMemory = createMemoryHistory({ initialEntries: [asPath] }) as MemoryHistoryInstance
22 |
23 | const enhancedHistory: MemoryHistoryInstance = {
24 | get index() {
25 | return historyMemory.index
26 | },
27 | get action() {
28 | return historyMemory.action
29 | },
30 | get location() {
31 | return historyMemory.location
32 | },
33 | createHref: historyMemory.createHref,
34 | push(to, state) {
35 | // alert(JSON.stringify(to))
36 | const path = fromReactRouterToNextUrl(to)
37 | historyMemory.push(to, state)
38 | NextRouter.push(path, void 0, state as any)
39 | },
40 | replace(to, state) {
41 | const path = fromReactRouterToNextUrl(to)
42 | historyMemory.replace(to, state)
43 | NextRouter.replace(path, void 0, state as any)
44 | },
45 | go(_delta) {
46 | throw new Error(`history.go isn't supported`)
47 | },
48 | back() {
49 | historyMemory.go(-1)
50 | NextRouter.back()
51 | },
52 | forward() {
53 | throw new Error(`history.forward isn't supported`)
54 | },
55 | listen(listener) {
56 | function handleRouteChange(_url: string) {
57 | listener({
58 | action: historyMemory.action,
59 | location: historyMemory.location,
60 | })
61 | }
62 | NextRouter.events.on('routeChangeComplete', handleRouteChange)
63 | NextRouter.events.on('hashChangeComplete', handleRouteChange)
64 |
65 | return () => {
66 | NextRouter.events.off('routeChangeComplete', handleRouteChange)
67 | NextRouter.events.off('hashChangeComplete', handleRouteChange)
68 | }
69 | },
70 | block(_blocker) {
71 | throw new Error(`history.block isn't supported`)
72 | },
73 | }
74 |
75 | function handleRouteChangeFromNext(url: string) {
76 | const to = parsePath(url)
77 | historyMemory.push(to, { locale: NextRouter.locale })
78 | }
79 | NextRouter.events.on('routeChangeComplete', handleRouteChangeFromNext)
80 | NextRouter.events.on('hashChangeComplete', handleRouteChangeFromNext)
81 |
82 | return enhancedHistory
83 | }
84 |
--------------------------------------------------------------------------------
/sandbox.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "infiniteLoopProtection": true,
3 | "hardReloadOnChange": false,
4 | "view": "browser"
5 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "alwaysStrict": true,
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "jsx": "preserve",
9 | "lib": [
10 | "dom",
11 | "es2017"
12 | ],
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "noImplicitAny": false,
16 | "noEmit": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "noUnusedLocals": false,
19 | "noUnusedParameters": false,
20 | "resolveJsonModule": true,
21 | "skipLibCheck": true,
22 | "strict": true,
23 | "target": "esnext"
24 | },
25 | "exclude": [
26 | "node_modules"
27 | ],
28 | "include": [
29 | "**/*.ts",
30 | "**/*.tsx"
31 | ]
32 | }
--------------------------------------------------------------------------------
/utils/auth.js:
--------------------------------------------------------------------------------
1 | import { useNavigate, useLocation } from 'react-router-dom'
2 | import { useEffect, useState } from 'react'
3 | import createPersistedState from 'use-persisted-state';
4 |
5 |
6 | const isBrowser = typeof window !== 'undefined'
7 |
8 | const AUTH_KEY = 'authed'
9 | const useAuthState = createPersistedState('AUTH_KEY');
10 |
11 | export function checkAuth() {
12 | return isBrowser && Boolean(localStorage.getItem(AUTH_KEY))
13 | }
14 |
15 | function login() {
16 | return isBrowser && localStorage.setItem(AUTH_KEY, 'true')
17 | }
18 |
19 | function logout() {
20 | return isBrowser && localStorage.removeItem(AUTH_KEY)
21 | }
22 |
23 | export function useAuth() {
24 | const [ isLoading, setLoading ] = useState(false)
25 | const [ auth, setAuthed ] = useAuthState(checkAuth())
26 | const navigate = useNavigate()
27 |
28 | return {
29 | isLoading,
30 | auth,
31 | login: () => {
32 | setAuthed(true)
33 | login()
34 | },
35 | logout: () => {
36 | setAuthed(false)
37 | logout()
38 | },
39 | checkAuth: async () => {
40 | setLoading(true);
41 | let authStatus = auth
42 | try {
43 | authStatus = checkAuth()
44 | } catch (error) {
45 | console.log('error', error);
46 | navigate('/login');
47 | } finally {
48 | setAuthed(authStatus)
49 | setLoading(false);
50 | }
51 | },
52 | };
53 | }
--------------------------------------------------------------------------------
/utils/lazyImports.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | /**
4 | * Defer loading of components & routes
5 | * named imports for React.lazy: https://github.com/facebook/react/issues/14603#issuecomment-726551598
6 | * @param factory - Component import resolver
7 | * @param name - Name of import key
8 | * @returns React component
9 | * @example
10 | * // Usage
11 | * const { Home } = lazyImport(() => import("./Home"), "Home");
12 | */
13 | export function lazyImport<
14 | T extends React.ComponentType,
15 | I extends { [K2 in K]: T },
16 | K extends keyof I
17 | >(factory: () => Promise, name: K): I {
18 | return Object.create({
19 | [name]: React.lazy(() => factory().then((module) => ({ default: module[name] }))),
20 | });
21 | }
--------------------------------------------------------------------------------
/views/ClientOnly.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function ClientOnly() {
4 | return (
5 |
6 |
Client only page
7 |
This page is not statically generated on build and only lives in react bundle
8 |
6 |
Home Page
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/views/NotFound.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function NotFound() {
4 | return (
5 |
6 | 404: NotFound Component via react router
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/views/Post.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useParams } from 'react-router-dom'
3 | import { BlogPosts } from './Posts'
4 |
5 | export default function Post() {
6 | const { slug } = useParams()
7 | // @ts-ignore
8 | const post = BlogPosts[slug];
9 |
10 | const { title, description } = post;
11 |
12 | return (
13 |
14 |
{title}
15 |
{description}
16 |
18 |
Blog
19 | {/* render any matching child */}
20 |
7 |
Private
8 |
This page is protected by withAuth higher order component
9 |
7 |
Private Class Hoc
8 |
This page is protected by a class based withAuth HOC
9 |