├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── components ├── container.tsx ├── docPane.tsx ├── editor.tsx ├── featureSection.tsx ├── folderList.tsx ├── folderPane.tsx ├── githubIcon.tsx ├── hero.tsx ├── homeNav.tsx ├── logo.tsx ├── newDocumentDialog.tsx ├── newFolderButton.tsx ├── newFolderDialog.tsx ├── postPreview.tsx ├── socialButton.tsx └── user.tsx ├── content.ts ├── db ├── connect.ts ├── doc.ts ├── folder.ts ├── index.ts └── user.ts ├── env.local ├── middleware ├── all.ts ├── auth.ts ├── db.ts ├── error.ts └── index.ts ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── app │ └── [[...id]].tsx ├── blog │ ├── [slug].tsx │ └── index.tsx ├── index.tsx └── signin.tsx ├── posts ├── known-raises-series-a.mdx ├── top-10-wiki-apps.mdx ├── whats-next-for-known.mdx └── your-team-needs-docs.mdx ├── public ├── docs.png ├── editor.png ├── favicon.ico └── vercel.svg ├── styles └── globals.css ├── tsconfig.json ├── types.d.ts ├── types.ts ├── utils ├── gradients.ts └── isSSR.ts └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/** 2 | lib 3 | build 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "plugins": [ 4 | "import", 5 | "jest" 6 | ], 7 | "settings": { 8 | "import/resolver": { 9 | "node": { 10 | "extensions": [".js", ".jsx", ".ts", ".tsx"] 11 | } 12 | } 13 | }, 14 | "rules": { 15 | "semi": "off", 16 | "react/jsx-filename-extension": "off", 17 | "react/jsx-props-no-spreading": "off", 18 | "react/destructuring-assignment": "off", 19 | "react/forbid-prop-types": "off", 20 | "react/prop-types": "off", 21 | "react/no-unused-prop-types": "warn", 22 | "import/extensions": "off", 23 | "import/no-unresolved": "error", 24 | "no-underscore-dangle": "off", 25 | "import/prefer-default-export": "off", 26 | "consistent-return": "off", 27 | "no-param-reassign": "off", 28 | "radix": "off", 29 | "no-use-before-define": "off", 30 | "react/prefer-stateless-function": "off", 31 | "no-unused-vars": "warn", 32 | "unicorn/no-null": "off", 33 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 34 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 35 | "@typescript-eslint/no-explicit-any": "off", 36 | "@typescript-eslint/no-non-null-assertion": "off", 37 | "@typescript-eslint/no-var-requires": "off", 38 | "@typescript-eslint/camelcase": "off", 39 | "@typescript-eslint/explicit-function-return-type": "off", 40 | "@typescript-eslint/no-empty-function": "off", 41 | "jsx-a11y/click-events-have-key-events": "off", 42 | "jsx-a11y/no-static-element-interactions": "off", 43 | "jsx-a11y/html-has-lang": "off", 44 | "jsx-a11y/anchor-is-valid": "off" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "trailingComma": "all", 4 | "singleQuote": true, 5 | "printWidth": 120, 6 | "tabWidth": 2 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Production Grade Next.js course 2 | > by scott moss and frontendmasters 3 | 4 | [Curriculum](https://production-grade-nextjs.vercel.app) 5 | -------------------------------------------------------------------------------- /components/container.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Pane } from 'evergreen-ui' 3 | 4 | const Container = ({ children, ...styles }) => ( 5 | 6 | {children} 7 | 8 | ) 9 | 10 | export default Container 11 | -------------------------------------------------------------------------------- /components/docPane.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Pane, Heading, majorScale } from 'evergreen-ui' 3 | import Link from 'next/link' 4 | import dynamic from 'next/dynamic' 5 | import { getRandomGradientCss } from '../utils/gradients' 6 | 7 | const Editor = dynamic(() => import('./editor'), { ssr: false }) 8 | 9 | const DocPane: FC<{ folder: any; doc: any }> = ({ folder, doc }) => { 10 | const { bg, image } = getRandomGradientCss() 11 | 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | {folder.name} 19 | 20 | {` / `} 21 | {doc.name} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | export default DocPane 33 | -------------------------------------------------------------------------------- /components/editor.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useState, useEffect, useRef } from 'react' 2 | import Embed from '@editorjs/embed' 3 | import Table from '@editorjs/table' 4 | import List from '@editorjs/list' 5 | import Warning from '@editorjs/warning' 6 | import Code from '@editorjs/code' 7 | import LinkTool from '@editorjs/link' 8 | import Image from '@editorjs/image' 9 | import Raw from '@editorjs/raw' 10 | import Header from '@editorjs/header' 11 | import Quote from '@editorjs/quote' 12 | import Marker from '@editorjs/marker' 13 | import CheckList from '@editorjs/checklist' 14 | import Delimiter from '@editorjs/delimiter' 15 | import InlineCode from '@editorjs/inline-code' 16 | import SimpleImage from '@editorjs/simple-image' 17 | import EditorJS from '@editorjs/editorjs' 18 | import { Icon, Pane, Text, TickIcon, Spinner, majorScale } from 'evergreen-ui' 19 | import { useThrottleCallback } from '@react-hook/throttle' 20 | 21 | const saveEditor = async (docId: string, data: any) => { 22 | await fetch(`${process.env.NEXT_PUBLIC_API_HOST}/api/doc/${docId}`, { 23 | method: 'PUT', 24 | body: JSON.stringify(data), 25 | headers: { 26 | 'Content-Type': 'application/json', 27 | }, 28 | }) 29 | } 30 | 31 | const EDITOR_JS_TOOLS = { 32 | embed: Embed, 33 | table: Table, 34 | marker: Marker, 35 | list: List, 36 | warning: Warning, 37 | code: Code, 38 | linkTool: LinkTool, 39 | image: Image, 40 | raw: Raw, 41 | header: Header, 42 | quote: Quote, 43 | checklist: CheckList, 44 | delimiter: Delimiter, 45 | inlineCode: InlineCode, 46 | simpleImage: SimpleImage, 47 | } 48 | 49 | const Editor: FC<{ docId: string; content: any }> = ({ content, docId }) => { 50 | const editor = useRef(null) 51 | const [saving, setSaving] = useState(false) 52 | const [doneSaving, setDoneSaving] = useState(false) 53 | 54 | const save = useThrottleCallback(async () => { 55 | if (editor.current) { 56 | const data = await editor.current.save() 57 | 58 | setSaving(true) 59 | setDoneSaving(false) 60 | 61 | await saveEditor(docId, { content: data }) 62 | 63 | setTimeout(() => { 64 | setSaving(false) 65 | setDoneSaving(true) 66 | 67 | setTimeout(() => { 68 | setDoneSaving(false) 69 | }, 3000) 70 | }, 2500) 71 | } 72 | }, 30) 73 | 74 | useEffect(() => { 75 | const editorJs = new EditorJS({ 76 | tools: EDITOR_JS_TOOLS, 77 | holder: 'editorjs', 78 | data: content, 79 | autofocus: true, 80 | placeholder: 'Let it be known.', 81 | onChange: save, 82 | }) 83 | 84 | editor.current = editorJs 85 | 86 | return () => { 87 | if (editor.current) { 88 | try { 89 | editor.current.destroy() 90 | } catch { 91 | console.warn('error destroying editor') 92 | } 93 | } 94 | } 95 | }, [save, content]) 96 | 97 | return ( 98 | 99 |
100 | {saving || doneSaving ? ( 101 | 114 | {saving ? : } 115 | {saving ? '...auto saving' : 'saved'} 116 | 117 | ) : null} 118 | 119 | ) 120 | } 121 | 122 | Editor.defaultProps = { 123 | content: {}, 124 | } 125 | 126 | export default Editor 127 | -------------------------------------------------------------------------------- /components/featureSection.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Pane, Heading, Paragraph, majorScale } from 'evergreen-ui' 3 | import Image from 'next/image' 4 | import Container from './container' 5 | 6 | const FeatureSection: FC<{ invert?: boolean; title: string; body: string; image: string }> = ({ 7 | title, 8 | body, 9 | image, 10 | invert, 11 | }) => { 12 | const Left = () => ( 13 | 14 | {title} 15 | {body} 16 | 17 | ) 18 | const Right = () => ( 19 | 20 | 21 | 22 | ) 23 | 24 | const children = invert ? [Right, Left] : [Left, Right] 25 | return ( 26 | 36 | 37 | 38 | {children.map((Child, i) => ( 39 | 40 | 41 | 42 | ))} 43 | 44 | 45 | 46 | ) 47 | } 48 | 49 | export default FeatureSection 50 | -------------------------------------------------------------------------------- /components/folderList.tsx: -------------------------------------------------------------------------------- 1 | import { Pane, majorScale, Menu, FolderCloseIcon } from 'evergreen-ui' 2 | import React, { FC } from 'react' 3 | import { useRouter } from 'next/router' 4 | 5 | const FolderList: FC<{ folders: any[] }> = ({ folders }) => { 6 | const router = useRouter() 7 | return ( 8 | 9 | 10 | {folders.map((folder) => ( 11 | router.push(`/app/${folder._id}`)}> 12 | {folder.name} 13 | 14 | ))} 15 | 16 | 17 | ) 18 | } 19 | 20 | FolderList.defaultProps = { 21 | folders: [], 22 | } 23 | 24 | export default FolderList 25 | -------------------------------------------------------------------------------- /components/folderPane.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useState } from 'react' 2 | import { Pane, Heading, majorScale, DocumentIcon, Button } from 'evergreen-ui' 3 | import Link from 'next/link' 4 | import { getRandomGradientCss } from '../utils/gradients' 5 | import NewFolderButton from './newFolderButton' 6 | import NewDocDialog from './newDocumentDialog' 7 | 8 | const FolderPane: FC<{ folder: any; docs: any[] }> = ({ folder, docs }) => { 9 | const { bg, image } = getRandomGradientCss() 10 | const [isShown, setIsShown] = useState(false) 11 | const [allDocs, setDocs] = useState(docs || []) 12 | 13 | const handleNewDoc = async (name: string) => { 14 | const res = await fetch(`${process.env.NEXT_PUBLIC_API_HOST}/api/doc/`, { 15 | method: 'POST', 16 | body: JSON.stringify({ name, folder: folder._id }), 17 | headers: { 18 | 'Content-Type': 'application/json', 19 | }, 20 | }) 21 | 22 | const { data } = await res.json() 23 | setDocs((state) => [...state, data]) 24 | } 25 | 26 | return ( 27 | 28 | 29 | 30 | 31 | setIsShown(true)} /> 32 | 33 | {folder.name} 34 | 35 | 36 | 37 | 38 | {allDocs.map((doc) => ( 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | ))} 49 | 50 | 51 | 52 | setIsShown(false)} /> 53 | 54 | ) 55 | } 56 | 57 | FolderPane.defaultProps = { 58 | docs: [], 59 | } 60 | 61 | export default FolderPane 62 | -------------------------------------------------------------------------------- /components/githubIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const GithubIcon = () => { 4 | return ( 5 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export default GithubIcon 16 | -------------------------------------------------------------------------------- /components/hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Pane, Heading, Paragraph, majorScale } from 'evergreen-ui' 3 | 4 | const Hero: FC<{ content: { title: string; body: string } }> = ({ content }) => { 5 | return ( 6 | 13 | 14 | 15 | {content.title} 16 | 17 | 18 | {content.body} 19 | 20 | 21 | 22 | ) 23 | } 24 | 25 | export default Hero 26 | -------------------------------------------------------------------------------- /components/homeNav.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Pane, majorScale, Text, Button } from 'evergreen-ui' 3 | import NextLink from 'next/link' 4 | import { useSession } from 'next-auth/client' 5 | import Container from './container' 6 | import Logo from './logo' 7 | 8 | const HomeNav: FC<{ links?: { name: string; link: string }[] }> = ({ links }) => { 9 | const [session] = useSession() 10 | 11 | return ( 12 | 45 | ) 46 | } 47 | 48 | HomeNav.defaultProps = { 49 | links: [{ name: 'Blog', link: '/blog' }], 50 | } 51 | 52 | export default HomeNav 53 | -------------------------------------------------------------------------------- /components/logo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | import { Text } from 'evergreen-ui' 4 | 5 | const Logo = ({ ...styles }) => { 6 | return ( 7 | 8 | 9 | 10 | Known. 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default Logo 18 | -------------------------------------------------------------------------------- /components/newDocumentDialog.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Dialog, TextInput } from 'evergreen-ui' 3 | 4 | const NewDocDialog = ({ onNewDoc, close, ...props }) => { 5 | const [name, setName] = useState('') 6 | const [saving, setSaving] = useState(false) 7 | 8 | const handleNewDocument = async () => { 9 | setSaving(true) 10 | await onNewDoc(name) 11 | setSaving(false) 12 | setName('') 13 | close() 14 | } 15 | 16 | return ( 17 | 27 | setName(e.target.value)} placeholder="doc name" /> 28 | 29 | ) 30 | } 31 | 32 | export default NewDocDialog 33 | -------------------------------------------------------------------------------- /components/newFolderButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Icon, PlusIcon, Pane, Tooltip } from 'evergreen-ui' 3 | 4 | const NewFolderButton: FC<{ onClick: any; tooltip?: string; size?: number }> = ({ onClick, tooltip, size }) => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | NewFolderButton.defaultProps = { 15 | tooltip: 'New Folder', 16 | size: 42, 17 | } 18 | 19 | export default NewFolderButton 20 | -------------------------------------------------------------------------------- /components/newFolderDialog.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Dialog, TextInput } from 'evergreen-ui' 3 | 4 | const NewFolderDialog = ({ onNewFolder, close, ...props }) => { 5 | const [name, setName] = useState('') 6 | const [saving, setSaving] = useState(false) 7 | 8 | const handleNewFolder = async () => { 9 | setSaving(true) 10 | await onNewFolder(name) 11 | setSaving(false) 12 | setName('') 13 | close() 14 | } 15 | 16 | return ( 17 | 27 | setName(e.target.value)} placeholder="folder name" /> 28 | 29 | ) 30 | } 31 | 32 | export default NewFolderDialog 33 | -------------------------------------------------------------------------------- /components/postPreview.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Pane, Heading, Paragraph, Button, majorScale } from 'evergreen-ui' 3 | import Link from 'next/link' 4 | 5 | const PostPreview: FC<{ post: { title: string; summary: string; slug: string } }> = ({ post }) => { 6 | return ( 7 | 8 | 9 | {post.title} 10 | 11 | {post.summary} 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | export default PostPreview 25 | -------------------------------------------------------------------------------- /components/socialButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Pane, Card } from 'evergreen-ui' 3 | import GithubIcon from './githubIcon' 4 | 5 | const icons = { github: GithubIcon } 6 | const SocialButton = ({ type, onClick }) => { 7 | const Icon = icons[type] || GithubIcon 8 | 9 | return ( 10 | 24 | 25 | 26 | 27 | {'Continue with '} 28 | {type} 29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | export default SocialButton 36 | -------------------------------------------------------------------------------- /components/user.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { Pane, Position, Avatar, Popover, Menu, LogOutIcon, majorScale, Text } from 'evergreen-ui' 3 | import { signOut } from 'next-auth/client' 4 | import { UserSession } from '../types' 5 | 6 | const User: FC<{ user: UserSession }> = ({ user }) => { 7 | return ( 8 | 9 | 13 | 14 | 15 | {user.name} 16 | 17 | 18 | {user.email} 19 | 20 | 21 | 22 | 23 | 24 | Sign out 25 | 26 | 27 | 28 | 29 | } 30 | > 31 | 39 | 40 | 41 | 42 | 43 | ) 44 | } 45 | 46 | export default User 47 | -------------------------------------------------------------------------------- /content.ts: -------------------------------------------------------------------------------- 1 | export const home = { 2 | draft: { 3 | hero: { 4 | title: 'Hmm, need something clever here', 5 | body: 'blah blah blah, our product is the best!', 6 | }, 7 | features: [ 8 | { title: 'Feature 1', body: 'something dope about feature 1 here soon.' }, 9 | { title: 'Feature 2', body: 'something dope about feature 2 here soon.' }, 10 | ], 11 | }, 12 | published: { 13 | hero: { 14 | title: 'A beautiful knowledge base for your whole team.', 15 | body: 'High performing teams use Known to document and record everything. Some other cool SaaS tag line here.', 16 | }, 17 | features: [ 18 | { 19 | title: 'Next gen editor', 20 | body: 21 | 'Forget about markdown and rich text. Our editor is superchared to handle any content you can throug at it.', 22 | }, 23 | { title: 'Stay organized', body: 'Use folders to put your docs right where you need them when you need them.' }, 24 | { title: 'Beautiful design', body: 'Award wining design that you will fall in love with.' }, 25 | ], 26 | }, 27 | } 28 | 29 | export const posts = { 30 | draft: [ 31 | `--- 32 | title: "We're hiring" 33 | summary: 'Will come up with summary later' 34 | slug: 'we-are-hiring' 35 | publsihedOn: '' 36 | --- 37 | 38 | ## nice post, who dis 39 | `, 40 | `--- 41 | title: Why you should write down everything 42 | summary: Will come up with summary later 43 | slug: why-you-should-write-down-everything 44 | publsihedOn: '' 45 | --- 46 | ## Writing is fun`, 47 | ], 48 | published: [ 49 | `--- 50 | title: "We're hiring" 51 | summary: Come work at a really nice company. 52 | slug: we-are-hiring 53 | publsihedOn: '12-03-2020' 54 | --- 55 | ## Come with with us 56 | `, 57 | `--- 58 | title: Why you should write down everything 59 | summary: If you write it down, you won't forget. 60 | slug: why-you-should-write-down-everything 61 | publsihedOn: '3-20-2020' 62 | --- 63 | ## Elon musk writes`, 64 | ], 65 | } 66 | -------------------------------------------------------------------------------- /db/connect.ts: -------------------------------------------------------------------------------- 1 | import { Db, MongoClient } from 'mongodb' 2 | 3 | /** 4 | * We have to cache the DB connection 5 | * when used in a serverless environment otherwise 6 | * we may encounter performance loss due to 7 | * time to connect. Also, depending on your DB, 8 | * you might night be able to have many concurrent 9 | * DB connections. Most traditional DBs were not made for a stateless 10 | * environment like serverless. A serverless DB (HTTP based DB) whould work 11 | * better. 12 | */ 13 | global.mongo = global.mongo || {} 14 | 15 | export const connectToDB = async () => { 16 | const db = {} 17 | 18 | return { db, dbClient: global.mongo.client } 19 | } 20 | -------------------------------------------------------------------------------- /db/doc.ts: -------------------------------------------------------------------------------- 1 | import { Db } from 'mongodb' 2 | import { nanoid } from 'nanoid' 3 | 4 | export const getOneDoc = async (db: Db, id: string) => {} 5 | 6 | export const getDocsByFolder = async (db: Db, folderId: string) => {} 7 | 8 | export const createDoc = async (db: Db, doc: { createdBy: string; folder: string; name: string; content?: any }) => {} 9 | 10 | export const updateOne = async (db: Db, id: string, updates: any) => {} 11 | -------------------------------------------------------------------------------- /db/folder.ts: -------------------------------------------------------------------------------- 1 | import { Db } from 'mongodb' 2 | import { nanoid } from 'nanoid' 3 | 4 | export const createFolder = async (db: Db, folder: { createdBy: string; name: string }) => {} 5 | 6 | export const getFolders = async (db: Db, userId: string) => {} 7 | -------------------------------------------------------------------------------- /db/index.ts: -------------------------------------------------------------------------------- 1 | import * as doc from './doc' 2 | import * as folder from './folder' 3 | import * as user from './user' 4 | 5 | export { connectToDB } from './connect' 6 | export { doc, folder, user } 7 | -------------------------------------------------------------------------------- /db/user.ts: -------------------------------------------------------------------------------- 1 | import { Db } from 'mongodb' 2 | 3 | export const getUserById = async (db: Db, id: string) => {} 4 | -------------------------------------------------------------------------------- /env.local: -------------------------------------------------------------------------------- 1 | GITHUB_ID= 2 | GITHUB_SECRET= 3 | DATABASE_URL= 4 | JWT_SECRET= 5 | NEXT_PUBLIC_API_HOST= 6 | -------------------------------------------------------------------------------- /middleware/all.ts: -------------------------------------------------------------------------------- 1 | import nc from 'next-connect' 2 | import db from './db' 3 | import auth from './auth' 4 | 5 | const middleware = nc() 6 | 7 | middleware.use(db).use(auth) 8 | export default middleware 9 | -------------------------------------------------------------------------------- /middleware/auth.ts: -------------------------------------------------------------------------------- 1 | import jwt from 'next-auth/jwt' 2 | 3 | export default async (req, res, next) => { 4 | const token = await jwt.getToken({ req, secret: process.env.JWT_SECRET }) 5 | 6 | if (token) { 7 | // Signed in 8 | req.user = token 9 | next() 10 | } else { 11 | // Not Signed in 12 | res.status(401) 13 | res.end() 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /middleware/db.ts: -------------------------------------------------------------------------------- 1 | import { connectToDB } from '../db/connect' 2 | 3 | declare global { 4 | namespace NodeJS { 5 | interface Global { 6 | mongo: any 7 | } 8 | } 9 | } 10 | 11 | export default async function database(req, res, next) { 12 | const { db, dbClient } = await connectToDB() 13 | req.db = db 14 | req.dbClinet = dbClient 15 | 16 | next() 17 | } 18 | -------------------------------------------------------------------------------- /middleware/error.ts: -------------------------------------------------------------------------------- 1 | export default async function onError(error, req, res, next) { 2 | console.log(error) 3 | res.status(500).end() 4 | } 5 | -------------------------------------------------------------------------------- /middleware/index.ts: -------------------------------------------------------------------------------- 1 | export { default as db } from './db' 2 | export { default as auth } from './auth' 3 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | typescript: { 3 | // !! WARN !! 4 | // Dangerously allow production builds to successfully complete even if 5 | // your project has type errors. 6 | // !! WARN !! 7 | ignoreBuildErrors: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@bomdi/codebox": "^1.0.10", 12 | "@editorjs/checklist": "^1.3.0", 13 | "@editorjs/code": "^2.6.0", 14 | "@editorjs/delimiter": "^1.2.0", 15 | "@editorjs/editorjs": "^2.19.0", 16 | "@editorjs/embed": "^2.4.0", 17 | "@editorjs/header": "^2.6.1", 18 | "@editorjs/image": "^2.6.0", 19 | "@editorjs/inline-code": "^1.3.1", 20 | "@editorjs/link": "^2.3.1", 21 | "@editorjs/list": "^1.6.1", 22 | "@editorjs/marker": "^1.2.2", 23 | "@editorjs/paragraph": "^2.8.0", 24 | "@editorjs/quote": "^2.4.0", 25 | "@editorjs/raw": "^2.3.0", 26 | "@editorjs/simple-image": "^1.4.0", 27 | "@editorjs/table": "^1.3.0", 28 | "@editorjs/warning": "^1.2.0", 29 | "@react-hook/throttle": "^2.2.0", 30 | "evergreen-ui": "^5.1.2", 31 | "gray-matter": "^4.0.2", 32 | "lodash.orderby": "^4.6.0", 33 | "mongodb": "^3.6.3", 34 | "morgan": "^1.10.0", 35 | "nanoid": "^3.1.18", 36 | "next": "10.0.3", 37 | "next-auth": "^3.1.0", 38 | "next-connect": "^0.9.1", 39 | "next-mdx-remote": "^1.0.0", 40 | "react": "17.0.1", 41 | "react-dom": "17.0.1", 42 | "react-editor-js": "^1.7.0", 43 | "reflect-metadata": "^0.1.13", 44 | "typeorm": "^0.2.29" 45 | }, 46 | "devDependencies": { 47 | "@types/mongodb": "^3.5.34", 48 | "@types/mongoose": "^5.10.1", 49 | "@types/node": "^14.14.10", 50 | "@typescript-eslint/parser": "^4.8.2", 51 | "eslint-plugin-import": "^2.22.1", 52 | "eslint-plugin-jest": "^24.1.3", 53 | "jest": "^26.6.3", 54 | "typescript": "^4.1.2" 55 | }, 56 | "peerOptionalDependencies": { 57 | "mongodb": "^3.6.3" 58 | }, 59 | "resolutions": { 60 | "typeorm": "0.2.28" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | // fixes a bug for next-auth and mongodb atlas somehow 2 | // https://github.com/nextauthjs/next-auth/issues/833 3 | import 'reflect-metadata' 4 | import React from 'react' 5 | import '../styles/globals.css' 6 | 7 | function MyApp({ Component, pageProps }) { 8 | return 9 | } 10 | 11 | export default MyApp 12 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Document, { Head, Main, NextScript, Html } from 'next/document' 3 | import { extractStyles } from 'evergreen-ui' 4 | 5 | export default class MyDocument extends Document { 6 | static getInitialProps({ renderPage }) { 7 | const page = renderPage() 8 | const { css, hydrationScript } = extractStyles() 9 | 10 | return { 11 | ...page, 12 | css, 13 | hydrationScript, 14 | } 15 | } 16 | 17 | render() { 18 | const { css, hydrationScript } = this.props 19 | 20 | return ( 21 | 22 | 23 |