Skip to content

Commit b6ae542

Browse files
alphatrlalphatrl
authored
fix(deps): Move from next.js to vite (#19)
* build(deps): Switch `nextjs` to `vite` * build(configs): Update configuration files * build: update tsconfig * refactor: move to vite format * chore(deps): bump vite to v7
1 parent 9030619 commit b6ae542

15 files changed

Lines changed: 978 additions & 3382 deletions

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,7 @@ yarn-error.log*
3232

3333
# vercel
3434
.vercel
35+
36+
# vite
37+
dist
38+
dist-ssr

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link
6+
rel="icon"
7+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👋</text></svg>"
8+
/>
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>alphatrl.github.io</title>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

‎next-env.d.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎next.config.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@
33
"version": "2.0.0",
44
"private": true,
55
"scripts": {
6-
"dev": "next dev",
7-
"build": "next build && next export && touch out/.nojekyll && cp CNAME ./out",
8-
"start": "next start",
9-
"lint": "next lint"
6+
"dev": "vite",
7+
"build": "vite build && touch dist/.nojekyll && cp CNAME ./dist",
8+
"preview": "vite preview",
9+
"lint": "eslint --ext .js,.jsx,.ts,.tsx src"
1010
},
1111
"dependencies": {
12-
"@svgr/webpack": "^5.5.0",
1312
"lodash": "^4.17.21",
14-
"next": "11.1.3",
1513
"react": "17.0.2",
1614
"react-dom": "17.0.2",
17-
"styled-components": "^5.3.3",
18-
"url-loader": "^4.1.1"
15+
"react-helmet-async": "^2.0.5",
16+
"styled-components": "^5.3.3"
1917
},
2018
"devDependencies": {
2119
"@types/node": "^16.4.13",
@@ -24,15 +22,17 @@
2422
"@types/styled-components": "^5.1.12",
2523
"@typescript-eslint/eslint-plugin": "^4.29.0",
2624
"@typescript-eslint/parser": "^4.20.0",
25+
"@vitejs/plugin-react": "^5.1.2",
2726
"eslint": "^7.32.0",
28-
"eslint-config-next": "^11.0.1",
2927
"eslint-config-prettier": "^8.3.0",
3028
"eslint-plugin-prettier": "^3.4.0",
3129
"eslint-plugin-react": "^7.24.0",
3230
"eslint-plugin-simple-import-sort": "^7.0.0",
33-
"fork-ts-checker-webpack-plugin": "^6.5.0",
3431
"prettier": "^2.5.1",
3532
"ts-node": "^10.4.0",
36-
"typescript": "4.5.4"
37-
}
38-
}
33+
"typescript": "4.5.4",
34+
"vite": "^7.3.1",
35+
"vite-plugin-svgr": "^4.5.0"
36+
},
37+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
38+
}

‎src/App.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import styled, { ThemeProvider } from 'styled-components';
3+
4+
import Introduction from './components/Introduction';
5+
import Projects from './components/Projects';
6+
import DefaultLayout from './layout/DefaultLayout';
7+
import { theme } from './theme';
8+
9+
const Wrapper = styled.div`
10+
display: flex;
11+
flex-direction: column;
12+
`;
13+
14+
const App: React.FC = () => {
15+
return (
16+
<ThemeProvider theme={theme}>
17+
<DefaultLayout title="Portfolio">
18+
<Wrapper>
19+
<Introduction />
20+
<Projects />
21+
</Wrapper>
22+
</DefaultLayout>
23+
</ThemeProvider>
24+
);
25+
};
26+
27+
export default App;

‎src/components/Icon/index.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import dynamic from 'next/dynamic';
2-
import React, { useCallback } from 'react';
1+
import React, { useCallback, lazy, Suspense } from 'react';
32

4-
const Email = dynamic(() => import('./components/Email'));
5-
const Github = dynamic(() => import('./components/Github'));
6-
const PlayStore = dynamic(() => import('./components/PlayStore'));
7-
const Twitter = dynamic(() => import('./components/Twitter'));
8-
const Web = dynamic(() => import('./components/Web'));
3+
const Email = lazy(() => import('./components/Email'));
4+
const Github = lazy(() => import('./components/Github'));
5+
const PlayStore = lazy(() => import('./components/PlayStore'));
6+
const Twitter = lazy(() => import('./components/Twitter'));
7+
const Web = lazy(() => import('./components/Web'));
98

109
interface Props {
1110
name: string;
@@ -33,7 +32,11 @@ const Icon: React.FC<Props> = (props) => {
3332
}
3433
}, [height, name, width]);
3534

36-
return getIcon();
35+
return (
36+
<Suspense fallback={null}>
37+
{getIcon()}
38+
</Suspense>
39+
);
3740
};
3841

3942
export default Icon;

‎src/components/SEO.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import Head from 'next/head';
21
import React from 'react';
3-
import { resolve } from 'url';
2+
import { Helmet } from 'react-helmet-async';
43

54
import config from '../config';
65

@@ -15,9 +14,10 @@ const SEO: React.FC<Props> = function (props) {
1514
const { siteMetadata } = config;
1615

1716
const metaDescription = description || siteMetadata.description;
17+
const logoUrl = new URL('logo-meta.png', siteMetadata.siteUrl).toString();
1818

1919
return (
20-
<Head>
20+
<Helmet>
2121
<title>
2222
{title} | {siteMetadata.title}
2323
</title>
@@ -26,26 +26,26 @@ const SEO: React.FC<Props> = function (props) {
2626
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
2727
/>
2828

29-
<meta lang={lang} />
29+
<html lang={lang} />
3030
<meta name="description" content={metaDescription} />
3131
<meta name="og:title" content={`${title} | ${siteMetadata.title}`} />
3232
<meta name="og:description" content={metaDescription} />
3333
<meta name="og:type" content="website" />
3434
<meta
3535
name="og:image"
36-
content={resolve(siteMetadata.siteUrl, 'logo-meta.png')}
36+
content={logoUrl}
3737
/>
3838
<meta name="og:url" content={siteMetadata.siteUrl} />
3939
<meta name="twitter:card" content={metaDescription} />
4040
<meta
4141
name="twitter:image"
42-
content={resolve(siteMetadata.siteUrl, 'logo-meta.png')}
42+
content={logoUrl}
4343
/>
4444
<meta name="twitter:creator" content={siteMetadata.author} />
4545
<meta name="twitter:url" content={siteMetadata.siteUrl} />
4646
<meta name="twitter:title" content={`${title} | ${siteMetadata.title}`} />
4747
<meta name="twitter:description" content={metaDescription} />
48-
</Head>
48+
</Helmet>
4949
);
5050
};
5151

‎src/main.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { HelmetProvider } from 'react-helmet-async';
4+
import App from './App';
5+
import './styles.css';
6+
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<HelmetProvider>
10+
<App />
11+
</HelmetProvider>
12+
</React.StrictMode>,
13+
document.getElementById('root')
14+
);

‎src/pages/_app.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)