migrate site from cra to next.js

ayanamists · Mar 13, 2024 · 93d8a5f · 93d8a5f
1 parent d1014f5
commit 93d8a5f
Show file tree

Hide file tree

Showing 34 changed files with 1,992 additions and 8,119 deletions.
diff --git a/packages/oh-my-old-tweet/.gitignore b/packages/oh-my-old-tweet/.gitignore
@@ -21,3 +21,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+dist/
+
+.next/
+
+next-env.d.ts
diff --git a/packages/oh-my-old-tweet/src/App.css → ...s/oh-my-old-tweet/app/[[...slug]]/App.css b/packages/oh-my-old-tweet/src/App.css → ...s/oh-my-old-tweet/app/[[...slug]]/App.css
diff --git a/packages/oh-my-old-tweet/app/[[...slug]]/page.tsx b/packages/oh-my-old-tweet/app/[[...slug]]/page.tsx
@@ -0,0 +1,14 @@
+import './App.css';
+import dynamic from 'next/dynamic';
+
+const PageRouter = dynamic(() => import('components/PageRouter'), { ssr: false });
+
+export function generateStaticParams() {
+  return [{ slug: [''] }];
+}
+
+function App() {
+  return <PageRouter />;
+}
+
+export default App;
diff --git a/packages/oh-my-old-tweet/app/globals.css b/packages/oh-my-old-tweet/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/oh-my-old-tweet/app/layout.tsx b/packages/oh-my-old-tweet/app/layout.tsx
@@ -0,0 +1,24 @@
+import './globals.css';
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (<html lang="en">
+
+        <head>
+            <meta charSet="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <meta name="theme-color" content="#000000" />
+            <meta name="description" content="A graceful, powerful and easy-to-use tool to see old (including deleted) tweets." />
+            <title>Oh my Old Tweet</title>
+        </head>
+
+        <body>
+            <noscript>You need to enable JavaScript to run this app.</noscript>
+            <div id="root">{children}</div>
+        </body>
+
+    </html>);
+}
diff --git a/...es/oh-my-old-tweet/src/pages/MainPage.tsx → ...s/oh-my-old-tweet/components/MainPage.tsx b/...es/oh-my-old-tweet/src/pages/MainPage.tsx → ...s/oh-my-old-tweet/components/MainPage.tsx
@@ -1,7 +1,11 @@
+"use client";
+
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { parseUserName } from '../InputParser';
-import MainLayout from '../Layout/MainLayout';
+import { parseUserName } from '../src/InputParser';
+import dynamic from 'next/dynamic';
+
+const MainLayout = dynamic(() => import('../src/Layout/MainLayout'), { ssr: false });
 
 function MarkBox({ text }: { text: string }) {
   return <mark className="px-2 text-white bg-tw-blue text-white rounded">{text}</mark>

diff --git a/packages/oh-my-old-tweet/src/App.tsx → ...oh-my-old-tweet/components/PageRouter.tsx b/packages/oh-my-old-tweet/src/App.tsx → ...oh-my-old-tweet/components/PageRouter.tsx
@@ -1,11 +1,10 @@
-import './App.css';
-import MainPage from './pages/MainPage';
-import UserPage from './pages/UserPage';
-import StatusPage from './pages/StatusPage';
-import { HashRouter, Routes, Route } from 'react-router-dom';
+"use client"
+import { Routes, Route, HashRouter } from 'react-router-dom';
+import MainPage from './MainPage';
+import StatusPage from './StatusPage';
+import UserPage from './UserPage';
 
-
-function App() {
+export default function App() {
   return (
     <HashRouter>
       <Routes>
@@ -15,6 +14,4 @@ function App() {
       </Routes>
     </HashRouter>
   );
-}
-
-export default App;
+}
diff --git a/.../oh-my-old-tweet/src/pages/StatusPage.tsx → ...oh-my-old-tweet/components/StatusPage.tsx b/.../oh-my-old-tweet/src/pages/StatusPage.tsx → ...oh-my-old-tweet/components/StatusPage.tsx
@@ -1,6 +1,8 @@
+"use client";
 import { useParams } from 'react-router-dom';
-import MainLayout from '../Layout/MainLayout';
-import { LoadableTCard } from '../LoadableTCard';
+import { LoadableTCard } from 'src/LoadableTCard';
+import MainLayout from 'src/Layout/MainLayout';
+
 
 export default function Page() {
   const { timestamp, user, id } = useParams();

diff --git a/...es/oh-my-old-tweet/src/pages/UserPage.tsx → ...s/oh-my-old-tweet/components/UserPage.tsx b/...es/oh-my-old-tweet/src/pages/UserPage.tsx → ...s/oh-my-old-tweet/components/UserPage.tsx
@@ -1,7 +1,8 @@
+"use client";
 import { useEffect } from 'react';
-import { Timeline } from '../Timeline';
 import { useParams, useNavigate } from 'react-router-dom';
-import MainLayout from '../Layout/MainLayout';
+import MainLayout from 'src/Layout/MainLayout';
+import { Timeline } from 'src/Timeline';
 
 export default function Page() {
   const { user } = useParams();

diff --git a/packages/oh-my-old-tweet/config/env.js b/packages/oh-my-old-tweet/config/env.js
diff --git a/packages/oh-my-old-tweet/config/getHttpsConfig.js b/packages/oh-my-old-tweet/config/getHttpsConfig.js
diff --git a/packages/oh-my-old-tweet/config/jest/babelTransform.js b/packages/oh-my-old-tweet/config/jest/babelTransform.js
diff --git a/packages/oh-my-old-tweet/config/jest/cssTransform.js b/packages/oh-my-old-tweet/config/jest/cssTransform.js
diff --git a/packages/oh-my-old-tweet/config/jest/fileTransform.js b/packages/oh-my-old-tweet/config/jest/fileTransform.js