Migrate to Next.js

.babelrc

@@ -1,4 +0,0 @@
-{
-    "plugins": ["@babel/plugin-transform-runtime"],
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -47,9 +47,9 @@ dist/
 
 # Source images
 # Instructions will be provided to download these from the game
-src/images/weapon*
-src/images/summon*
-src/images/chara*
+public/images/weapon*
+public/images/summon*
+public/images/chara*
 
 # Typescript v1 declaration files
 typings/

.sassrc.js

@@ -1,10 +0,0 @@
-const path = require('path');
-const cwd = process.cwd();
-
-module.exports = {
-    data: '@import "globals";',
-    'includePaths': [
-        'node_modules',
-        'assets/scss'
-    ]
-}

README.md

@@ -0,0 +1,34 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[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`.
+
+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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/AboutModal/index.tsx

@@ -5,7 +5,7 @@ import api from '~utils/api'
 import Modal from '~components/Modal'
 import Overlay from '~components/Overlay'
 
-import './index.css'
+import './index.module.css'
 
 interface Props {
     close: () => void

components/App/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Route, Routes, useNavigate } from 'react-router-dom'
+
+import Header from '~components/Header'
+
+import NewRoute from '~routes/NewRoute'
+import PartyRoute from '~routes/PartyRoute'
+import PartiesRoute from '~routes/PartiesRoute'
+import ProfileRoute from '~routes/ProfileRoute'
+
+
+const App = () => {
+    const navigate = useNavigate()
+    const route = (pathname: string) => navigate(pathname)
+
+    return (   
+        <div>
+            <Header navigate={route} />
+            <Routes>
+                <Route path='/' element={<NewRoute />} />
+                <Route path='/parties/' element={<PartiesRoute />} />
+                <Route path='/p/:hash' element={<PartyRoute />} />
+                <Route path='/:username' element={<ProfileRoute />} />
+            </Routes>
+        </div>
+    )
+}
+
+export default App

components/Button/index.scss

@@ -1,13 +1,10 @@
-button {
-    border: none;
-    font-weight: $medium;
-}
-
 .Button {
     align-items: center;
+    border: none;
     border-radius: 6px;
     display: inline-flex;
     font-size: 1.4rem;
+    font-weight: $medium;
     gap: 6px;
     padding: 8px 12px;
 
@@ -87,9 +84,3 @@ button {
         color: inherit;
     }
 }
-
-@include media('>small', '<=medium') {
-    .Button {
-        font-size: 1.6rem;
-    }
-}

components/Button/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react'
+import Image from 'next/image'
 import classNames from 'classnames'
 
 import './index.scss'
 
-import New from '../../../assets/new'
-import Menu from '../../../assets/menu'
-import Link from '../../../assets/link'
-
 interface Props {
     color: string
     disabled: boolean
@@ -36,11 +33,17 @@ class Button extends React.Component<Props, State> {
     render() {
         let icon
         if (this.props.type === 'new') {
-            icon = <span className='icon'><New /></span>
+            icon = <span className='icon'>
+                <img src="/icons/new.svg" />
+            </span>
         } else if (this.props.type === 'menu') {
-            icon = <span className='icon'><Menu /></span>
+            icon = <span className='icon'>
+                <img src="/icons/menu.svg" />
+            </span>
         } else if (this.props.type === 'link') {
-            icon = <span className='icon'><Link /></span>
+            icon = <span className='icon'>
+                <img src="/icons/link.svg" />
+            </span>
         }
 
         const classes = classNames({

components/CharacterResult/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
+import Image from 'next/image'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
-import images from '../../images/chara-grid/*.jpg'
-
 import './index.scss'
 
 interface Props {
@@ -14,18 +13,11 @@ const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
 
 class CharacterResult extends React.Component<Props> {
     render() {
-        let imgSrc
-
         const character = this.props.data
-        if (process.env.NODE_ENV === 'development') {
-            imgSrc = images[character.granblue_id]
-        } else if (process.env.NODE_ENV === 'production') {
-            imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/chara-grid/${character.granblue_id}.jpg`
-        }
 
         return (
             <li className="CharacterResult" onClick={this.props.onClick}>
-                <img alt={character.name.en} src={imgSrc} />
+                <img alt={character.name.en} src={`/images/chara-grid/${character.granblue_id}.jpg`} />
                 <div>
                     <div>
                         <h5>{character.name.en}</h5>

components/CharacterUnit/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
 import classnames from 'classnames'
 import { useModal as useModal } from '~utils/useModal'
 
@@ -7,9 +8,6 @@ import UncapIndicator from '~components/UncapIndicator'
 
 import './index.scss'
 
-import images from '../../images/chara-main/*.jpg'
-import Plus from '../../../assets/plus.svg'
-
 interface Props {
     onReceiveData: (character: Character, position: number) => void
     character: Character | undefined
@@ -35,17 +33,13 @@ const CharacterUnit = (props: Props) => {
         generateImageUrl()
     })
 
+    
     function generateImageUrl() {
-        let imgSrc
+        let imgSrc = ""
+        
         if (props.character) {
             const character = props.character!
-    
-            // Generate the correct source for the weapon
-            if (process.env.NODE_ENV === 'development') {
-                imgSrc = images[character.granblue_id]
-            } else if (process.env.NODE_ENV === 'production') {
-                imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/chara-main/${character.granblue_id}.jpg`
-            }
+            imgSrc = `/images/chara-main/${character.granblue_id}.jpg`
         }
 
         setImageUrl(imgSrc)
@@ -66,13 +60,8 @@ const CharacterUnit = (props: Props) => {
         <div>
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="CharacterImage">
-                    {
-                        (imageUrl != '') 
-                            ? <img className="grid_image" src={imageUrl} />
-                            : <img className="grid_image" />
-
-                    }
-                    { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                    <img alt="ALT TEXT GOES HERE" className="grid_image" src={imageUrl} />
+                    { (props.editable) ? <span className='icon'><img src="/icons/plus.svg" /></span> : '' }
                 </div>
                 <UncapIndicator 
                     type="character"

components/Fieldset/index.scss

@@ -26,7 +26,7 @@
     padding: 4px 16px;
 }
 
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: #a9a9a9 !important;
-    opacity: 1; /* Firefox */
-  }
+// ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+//     color: #a9a9a9 !important;
+//     opacity: 1; /* Firefox */
+//   }

components/Fieldset/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './index.css'
+import './index.scss'
 
 interface Props {
     fieldName: string

components/GridRep/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
 
-import './index.css'
+import './index.scss'
 
 import mainhandImages from '../../images/weapon-main/*.jpg'
 import gridImages from '../../images/weapon-grid/*.jpg'
@@ -39,23 +40,11 @@ const GridRep = (props: Props) => {
     }
 
     function generateMainhandImage() {
-        return (mainhand)
-            ? <img src={
-                process.env.NODE_ENV === 'development'
-                    ? mainhandImages[mainhand?.granblue_id || 0]
-                    : `${process.env.REACT_APP_SIERO_IMG_URL}/weapon-main/${mainhand?.granblue_id}.jpg`
-            } />
-            : <img />
+        return <img alt="ALT TEXT GOES HERE" src={`/images/weapon-main/${mainhand?.granblue_id}.jpg`} />
     }
 
     function generateGridImage(position: number) {
-        return (weapons[position])
-            ? <img src={
-                process.env.NODE_ENV === 'development'
-                    ? gridImages[weapons[position]?.granblue_id || 0]
-                    : `${process.env.REACT_APP_SIERO_IMG_URL}/weapon-grid/${weapons[position]?.granblue_id}.jpg`
-            } />
-            : <img />
+        return <img alt="ALT TEXT GOES HERE" src={`/images/weapon-grid/${weapons[position]?.granblue_id}.jpg`} />
     }
 
     return (

components/GridRepCollection/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.css'
+import './index.scss'
 
 interface Props {}
 

components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import { useCookies } from 'react-cookie'
 
 import Button from '~components/Button'
@@ -15,7 +15,7 @@ const Header = (props: Props) => {
     const [username, setUsername] = useState(undefined)
     const [cookies, setCookie, removeCookie] = useCookies(['user'])
 
-    let history = useHistory()
+    let navigate = useNavigate()
     let location = useLocation()
     
     const route = (pathname: string) => props.navigate(pathname)
@@ -39,13 +39,13 @@ const Header = (props: Props) => {
     }
 
     function newParty() {
-        props.navigate('/')
+        navigate('/')
     }
 
     function logout() {
         removeCookie('user')
         window.history.replaceState(null, `Grid Tool`, `/`)
-        history.go(0)
+        navigate(0)
     }
         
     return (

components/LoginModal/index.tsx

@@ -8,9 +8,9 @@ import Fieldset from '~components/Fieldset'
 import Modal from '~components/Modal'
 import Overlay from '~components/Overlay'
 
-import './index.css'
+import './index.scss'
 
-import New from '../../../assets/new'
+// import New from '../../../assets/new'
 
 interface Props {
     cookies: Cookies
@@ -111,7 +111,8 @@ const LoginModal = (props: Props) => {
                 <Modal styleName="LoginForm">
                     <div id="ModalTop">
                         <h1>Log in</h1>
-                        <i className='close' onClick={props.close}><New /></i>
+                        {/* <i className='close' onClick={props.close}><New /></i> */}
+                        <i className='close' onClick={props.close}></i>
                     </div>
                     <form className="form" onSubmit={submit}>
                         <div id="fields">

components/Modal/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     styleName?: string

components/Overlay/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     onClick: OnClickEvent

components/Party/index.tsx

@@ -11,14 +11,15 @@ import SummonGrid from '~components/SummonGrid'
 import CharacterGrid from '~components/CharacterGrid'
 
 // GridType
-export enum GridType {
+enum GridType {
     Class,
     Character,
     Weapon,
     Summon
 }
+export { GridType }
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     partyId?: string

components/SearchModal/index.tsx

@@ -8,7 +8,7 @@ import CharacterResult from '~components/CharacterResult'
 import WeaponResult from '~components/WeaponResult'
 import SummonResult from '~components/SummonResult'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     close: () => void

components/Segment/index.scss

@@ -34,10 +34,3 @@
         }
     }
 }
-
-@include media('>small', '<=medium') {
-  .Segment {
-      flex-grow: 1;
-      font-size: 1.6rem;
-  }
-}

components/SegmentedControl/index.scss

@@ -14,13 +14,3 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     z-index: 1;
 }
-
-@include media('>small', '<=medium') {
-    .SegmentedControlWrapper {
-        justify-content: stretch;
-    }
-    
-    .SegmentedControl {
-        width: 100%;
-    }
-}

components/SignupModal/index.tsx

@@ -8,9 +8,9 @@ import Fieldset from '~components/Fieldset'
 import Modal from '~components/Modal'
 import Overlay from '~components/Overlay'
 
-import './index.css'
+import './index.scss'
 
-import New from '../../../assets/new'
+// import New from '../../../assets/new'
 
 interface Props {
     cookies: Cookies

components/SummonResult/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
+import Image from 'next/image'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
-import gridImages from '../../images/summon-grid/*.jpg'
-
-import './index.css'
+import './index.scss'
 
 interface Props {
     data: Summon
@@ -14,18 +13,11 @@ const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
 
 class SummonResult extends React.Component<Props> {
     render() {
-        let imgSrc
-
         const summon = this.props.data
-        if (process.env.NODE_ENV === 'development') {
-            imgSrc = gridImages[summon.granblue_id]
-        } else if (process.env.NODE_ENV === 'production') {
-            imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`
-        }
 
         return (
             <li className="SummonResult" onClick={this.props.onClick}>
-                <img alt={summon.name.en} src={imgSrc} />
+                <img alt={summon.name.en} src={`/images/summon-grid/${summon.granblue_id}.jpg`} />
                 <div>
                     <div>
                         <h5>{summon.name.en}</h5>

components/SummonUnit/index.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+
 import classnames from 'classnames'
 import { useModal as useModal } from '~utils/useModal'
 
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
-import mainImages from '../../images/summon-main/*.jpg'
-import gridImages from '../../images/summon-grid/*.jpg'
-import Plus from '../../../assets/plus.svg'
-
 import './index.scss'
 
 interface Props {
@@ -41,22 +39,15 @@ const SummonUnit = (props: Props) => {
     })
 
     function generateImageUrl() {
-        let imgSrc
+        let imgSrc = ""
         if (props.summon) {
             const summon = props.summon!
     
-            // Generate the correct source for the weapon
-            if (process.env.NODE_ENV === 'development') {
+            // Generate the correct source for the summon
             if (props.unitType == 0 || props.unitType == 2)
-                    imgSrc = mainImages[summon.granblue_id]
+                imgSrc = `/images/summon-main/${summon.granblue_id}.jpg`
             else
-                    imgSrc = gridImages[summon.granblue_id]
-            } else if (process.env.NODE_ENV === 'production') {
-                if (props.unitType == 0 || props.unitType == 2)
-                    imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/summon-main/${summon.granblue_id}.jpg`
-                else
-                    imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`
-            }
+                imgSrc = `/images/summon-grid/${summon.granblue_id}.jpg`
         }
         
         setImageUrl(imgSrc)
@@ -77,13 +68,8 @@ const SummonUnit = (props: Props) => {
         <div>
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="SummonImage">
-                    { 
-                        (imageUrl != '') 
-                            ? <img className="grid_image" src={imageUrl} />
-                            : <img className="grid_image" />
-
-                    }
-                    { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                    <img alt="ALT TEXT GOES HERE" className="grid_image" src={imageUrl} />
+                    { (props.editable) ? <span className='icon'><img src="/icons/plus.svg" /></span> : '' }
                 </div>
                 <UncapIndicator 
                     type="summon"

components/UncapIndicator/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import UncapStar from '~components/UncapStar'
 
-import './index.css'
+import './index.scss'
 
 
 interface Props {

components/UncapStar/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
+import Image from 'next/image'
 import classnames from 'classnames'
 
-import './index.css'
-
-import Star from '../../../assets/star'
+import './index.scss'
 
 interface Props {
     uncap: boolean
@@ -16,7 +15,7 @@ const UncapStar = (props: Props) => {
     })
 
     return (
-        <li className={classes}><Star /></li>
+        <li className={classes}><img src="/icons/star.svg" /></li>
     )
 }
 

components/WeaponLabelIcon/index.scss

@@ -0,0 +1,79 @@
+.WeaponLabelIcon {
+    display: inline-block;
+    background-size: 60px 25px;
+    height: 25px;
+    width: 60px;
+}
+
+/* Elements */
+
+.fire {
+    background-image: url('/images/labels/element/Label_Element_Fire.png')
+}
+
+.water {
+    background-image: url('/images/labels/element/Label_Element_Water.png')
+}
+
+.earth {
+    background-image: url('/images/labels/element/Label_Element_Earth.png')
+}
+
+.wind {
+    background-image: url('/images/labels/element/Label_Element_Wind.png')
+}
+
+.dark {
+    background-image: url('/images/labels/element/Label_Element_Dark.png')
+}
+
+.light {
+    background-image: url('/images/labels/element/Label_Element_Light.png')
+}
+
+.null {
+    background-image: url('/images/labels/element/Label_Element_Any.png')
+}
+
+/* Proficiencies */
+
+.sword {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Sabre.png')
+}
+
+.dagger {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Dagger.png')
+}
+
+.axe {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Axe.png')
+}
+
+.spear {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Spear.png')
+}
+
+.staff {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Staff.png')
+}
+
+.fist {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Melee.png')
+}
+
+.harp {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Harp.png')
+}
+
+.gun {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Gun.png')
+}
+
+.bow {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Bow.png')
+}
+
+.katana {
+    background-image: url('/images/labels/proficiency/Label_Weapon_Katana.png')
+}
+

components/WeaponLabelIcon/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     labelType: string

components/WeaponResult/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
+import Image from 'next/image'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
-import gridImages from '../../images/weapon-grid/*.jpg'
-
-import './index.css'
+import './index.scss'
 
 interface Props {
     data: Weapon
@@ -16,18 +15,11 @@ const Series = ['seraphic', 'grand', 'opus', 'draconic', 'revenant', 'primal', '
 
 class WeaponResult extends React.Component<Props> {
     render() {
-        let imgSrc
-
         const weapon = this.props.data
-        if (process.env.NODE_ENV === 'development') {
-            imgSrc = gridImages[weapon.granblue_id]
-        } else if (process.env.NODE_ENV === 'production') {
-            imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
-        }
 
         return (
             <li className="WeaponResult" onClick={this.props.onClick}>
-                <img alt={weapon.name.en} src={imgSrc} />
+                <img alt={weapon.name.en} src={`/images/weapon-grid/${weapon.granblue_id}.jpg`} />
                 <div>
                     <div>
                         <h5>{weapon.name.en}</h5>

components/WeaponUnit/index.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+
 import classnames from 'classnames'
 import { useModal as useModal } from '~utils/useModal'
 
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
-import mainImages from '../../images/weapon-main/*.jpg'
-import gridImages from '../../images/weapon-grid/*.jpg'
-import Plus from '../../../assets/plus.svg'
-
 import './index.scss'
 
 interface Props {
@@ -41,22 +39,14 @@ const WeaponUnit = (props: Props) => {
     })
 
     function generateImageUrl() {
-        let imgSrc
+        let imgSrc = ""
         if (props.weapon) {
             const weapon = props.weapon!
     
-            // Generate the correct source for the weapon
-            if (process.env.NODE_ENV === 'development') {
             if (props.unitType == 0)
-                    imgSrc = mainImages[weapon.granblue_id]
+                imgSrc = `/images/weapon-main/${weapon.granblue_id}.jpg`
             else
-                    imgSrc = gridImages[weapon.granblue_id]
-            } else if (process.env.NODE_ENV === 'production') {
-                if (props.unitType == 0)
-                    imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`
-                else
-                    imgSrc = `${process.env.REACT_APP_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
-            }
+                imgSrc = `/images/weapon-grid/${weapon.granblue_id}.jpg`
         }
         
         setImageUrl(imgSrc)
@@ -76,13 +66,8 @@ const WeaponUnit = (props: Props) => {
         <div>
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="WeaponImage">
-                    { 
-                        (imageUrl != '') 
-                            ? <img className="grid_image" src={imageUrl} />
-                            : <img className="grid_image" />
-
-                    }
-                    { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                    <img alt="ALT TEXT GOES HERE" className="grid_image" src={imageUrl} />
+                    { (props.editable) ? <span className='icon'><img src="/icons/plus.svg" /></span> : '' }
                 </div>
                 <UncapIndicator 
                     type="weapon"

index.js

@@ -1,17 +0,0 @@
-const express = require('express');
-const path = require('path');
-
-const app = express();
-
-// Serve the static files from the React app
-app.use(express.static(path.join(__dirname, 'dist')));
-
-// Handles any requests that don't match the ones above
-app.get('*', (req, res) =>{
-    res.sendFile(path.join(__dirname+'/dist/index.html'));
-});
-
-const port = process.env.PORT || 3000;
-app.listen(port);
-
-console.log('App is listening on port ' + port);

jsconfig.json

@@ -1,5 +0,0 @@
-{
-    "compilerOptions": {
-        "baseUrl": "src"
-    }
-}

next.config.js

@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const path = require('path')
+
+module.exports = {reactStrictMode: true,
+  sassOptions: {
+    prependData: '@import "variables";',
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+  webpack(config) {
+    config.module.rules[2].oneOf.forEach((one) => {
+      if (!`${one.issuer?.and}`.includes('_app')) return;
+      one.issuer.and = [path.resolve(__dirname)];
+    });
+    return config;
+  },
+};
+

package.json

@@ -1,53 +1,29 @@
 {
-  "name": "hensei-web",
-  "version": "1.0.0",
-  "author": "Justin Edmund (@jedmund)",
-  "main": "./src/index.html",
-  "browserslist": "last 2 versions",
+  "name": "grid-web",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 1234",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
   "dependencies": {
-    "@babel/core": "^7.16.12",
-    "@babel/plugin-transform-runtime": "^7.16.10",
-    "@svgr/parcel-plugin-svgr": "^5.5.0",
-    "@types/axios": "^0.14.0",
-    "@types/classnames": "^2.3.0",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
-    "autoprefixer": "^10.4.2",
     "axios": "^0.25.0",
     "classnames": "^2.3.1",
-    "components": "^0.1.0",
-    "dotenv": "^14.3.0",
-    "express": "^4.17.2",
-    "i18next": "^21.6.7",
-    "i18next-browser-languagedetector": "^6.1.2",
-    "i18next-xhr-backend": "^3.2.2",
-    "include-media": "^1.4.10",
     "meyer-reset-scss": "^2.0.4",
-    "next": "^12.0.8",
-    "parcel-bundler": "^1.12.4",
-    "postcss-modules": "^4.3.0",
-    "postcss-normalize": "^10.0.1",
-    "react": "^17.0.2",
+    "next": "12.0.8",
+    "react": "17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.3",
     "react-router-dom": "^6.2.1",
-    "sass": "^1.49.0",
-    "typescript": "^4.5.5"
-  },
-  "scripts": {
-    "dev": "next dev -p 1234",
-    "build": "next build",
-    "start": "next start"
-  },
-  "compilerOptions": {
-    "jsx": "react",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "sass": "^1.49.0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.11",
-    "node-sass-package-importer": "^5.3.2"
+    "@types/node": "17.0.11",
+    "@types/react": "17.0.38",
+    "eslint": "8.7.0",
+    "eslint-config-next": "12.0.8",
+    "typescript": "4.5.5"
   }
 }

pages/_app.tsx

@@ -0,0 +1,9 @@
+import '../styles/globals.scss'
+
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/index.tsx

@@ -0,0 +1,24 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+import { CookiesProvider } from 'react-cookie'
+import { BrowserRouter } from 'react-router-dom'
+
+import App from '~/components/App'
+
+const Home: NextPage = () => {
+  if (typeof window === "undefined") 
+    return null
+    
+  return (
+    <BrowserRouter>
+        <CookiesProvider>
+            <App />
+        </CookiesProvider>
+    </BrowserRouter>
+  )
+}
+
+export default Home

public/icons/menu.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H11C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1ZM0 6C0 5.44772 0.447715 5 1 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H1C0.447715 7 0 6.55228 0 6ZM1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12H11C11.5523 12 12 11.5523 12 11C12 10.4477 11.5523 10 11 10H1Z" />
+</svg>

public/menu.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H11C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1ZM0 6C0 5.44772 0.447715 5 1 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H1C0.447715 7 0 6.55228 0 6ZM1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12H11C11.5523 12 12 11.5523 12 11C12 10.4477 11.5523 10 11 10H1Z" />
-</svg>