feat: migrate vite to next.js

.env.local.example

@@ -1 +1,7 @@
-FIREBASE_DATABASE_EMULATOR_HOST=localhost:9000
+NEXT_PUBLIC_FIREBASE_API_KEY="xxxxxxxxxxxxxx"
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="xxxxxxxxxxxxxx"
+NEXT_PUBLIC_FIREBASE_DATABASE_URL="xxxxxxxxxxxxxx"
+NEXT_PUBLIC_FIREBASE_PROJECT_ID="xxxxxxxxxxxxxx"
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="xxxxxxxxxxxxxx"
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="xxxxxxxxxxxxxx"
+NEXT_PUBLIC_FIREBASE_APP_ID="xxxxxxxxxxxxxx"

.eslintrc.json

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

.gitignore

@@ -5,3 +5,4 @@ dist
 dist-ssr
 *.local
 .env
+.next

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -1,20 +1,21 @@
 {
   "name": "widgets",
   "version": "0.4.1",
-  "main": "index.js",
   "license": "MIT",
   "engines": {
     "node": "14.x"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "serve": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@react-firebase/database": "^0.3.11",
     "firebase": "^8.9.1",
+    "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.1"
@@ -23,15 +24,13 @@
     "@firebase/app-types": "^0.7.0",
     "@firebase/auth-types": "^0.11.0",
     "@firebase/database-types": "^0.9.1",
-    "@types/node": "^16.10.2",
+    "@types/node": "^16.10.3",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
-    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2",
     "firebase-tools": "^9.19.0",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.2",
-    "vite-plugin-mpa": "^1.1.0",
-    "vite-tsconfig-paths": "^3.3.14"
+    "typescript": "^4.4.3"
   },
   "resolutions": {
     "styled-components": "^5"

src/components/AdminApp.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import '@/global.css';
 import { Index } from '@/components/admin'
 import { FirebaseDatabaseProvider } from '@react-firebase/database';
 import firebase from '@/lib/firebase';

src/lib/firebase.ts

@@ -3,13 +3,13 @@ import 'firebase/database';
 import firebase from 'firebase/app';
 
 const config = {
-  apiKey: import.meta.env.VITE_FIREBASE_KEY,
-  authDomain: import.meta.env.VITE_FIREBASE_DOMAIN,
-  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE,
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_FIREBASE_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
 };
 
 let auth;

src/pages/_app.tsx

@@ -0,0 +1,7 @@
+import '@/global.css';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

src/pages/admin/index.tsx

@@ -0,0 +1,13 @@
+import { Index } from '@/components/admin'
+import { FirebaseDatabaseProvider } from '@react-firebase/database';
+import firebase from '@/lib/firebase';
+
+const AdminPage = () => {
+  return (
+    <FirebaseDatabaseProvider firebase={firebase}>
+      <Index />
+    </FirebaseDatabaseProvider>
+  );
+};
+
+export default AdminPage;

src/pages/index.tsx

@@ -0,0 +1,7 @@
+const IndexPage = () => {
+  return (
+    <div>NO Content</div>
+  );
+};
+
+export default IndexPage;

src/components/PreviewApp.tsx → src/pages/preview/index.tsx

@@ -1,16 +1,13 @@
-import React from 'react';
-
-import '@/global.css';
 import { Preview } from '@/components/Preview'
 import { FirebaseDatabaseProvider } from '@react-firebase/database';
 import firebase from '@/lib/firebase';
 
-const PreviewApp = () => {
+const PreviewPage = () => {
   return (
     <FirebaseDatabaseProvider firebase={firebase}>
       <Preview />
     </FirebaseDatabaseProvider>
   );
 };
 
-export { PreviewApp };
+export default PreviewPage;