@@ -4,99 +4,106 @@ import Image from "next/image";
44import { Inter } from "@next/font/google" ;
55import styles from "./page.module.css" ;
66import Particles from "./particles" ;
7- import { useParticlesPlugins } from "@tsparticles/react" ;
7+ import { useEffect , useState } from "react" ;
8+ import { initParticlesEngine } from "@tsparticles/react" ;
89import { loadFull } from "tsparticles" ;
910import { Engine } from "@tsparticles/engine" ;
1011
11- const inter = Inter ( { subsets : [ "latin" ] } ) ;
12+ const inter = Inter ( { subsets : [ "latin" ] } ) ;
1213
1314export default function Home ( ) {
14- const { done } = useParticlesPlugins ( async ( engine : Engine ) => {
15- await loadFull ( engine ) ;
16- } ) ;
15+ const [ init , setInit ] = useState ( false ) ;
1716
18- return (
19- < main className = { styles . main } >
20- < Particles id = "tsparticles" done = { done } />
21- < div className = { styles . description } >
22- < p >
23- Get started by editing
24- < code className = { styles . code } > app/page.tsx</ code >
25- </ p >
26- < div >
27- < a
28- href = "https://vercel.com?utm_source=create-next-app& utm_medium = appdir - template & utm_campaign = create - next - app "
29- target = "_blank"
30- rel = "noopener noreferrer"
31- >
32- By{ " " }
33- < Image
34- src = "/vercel.svg"
35- alt = "Vercel Logo"
36- className = { styles . vercelLogo }
37- width = { 100 }
38- height = { 24 }
39- priority
40- />
41- </ a >
42- </ div >
43- </ div >
17+ useEffect ( ( ) => {
18+ initParticlesEngine ( async ( engine : Engine ) => {
19+ await loadFull ( engine ) ;
20+ } ) . then ( ( ) => {
21+ setInit ( true ) ;
22+ } ) ;
23+ } , [ ] ) ;
4424
45- < div className = { styles . center } >
46- < Image
47- className = { styles . logo }
48- src = "/next.svg"
49- alt = "Next.js Logo"
50- width = { 180 }
51- height = { 37 }
52- priority
53- />
54- < div className = { styles . thirteen } >
55- < Image src = "/thirteen.svg" alt = "13" width = { 40 } height = { 31 } priority />
56- </ div >
57- </ div >
25+ return (
26+ < main className = { styles . main } >
27+ < Particles id = "tsparticles" done = { init } />
28+ < div className = { styles . description } >
29+ < p >
30+ Get started by editing
31+ < code className = { styles . code } > app/page.tsx</ code >
32+ </ p >
33+ < div >
34+ < a
35+ href = "https://vercel.com?utm_source=create-next-app& utm_medium = appdir - template & utm_campaign = create - next - app "
36+ target = "_blank"
37+ rel = "noopener noreferrer"
38+ >
39+ By{ " " }
40+ < Image
41+ src = "/vercel.svg"
42+ alt = "Vercel Logo"
43+ className = { styles . vercelLogo }
44+ width = { 100 }
45+ height = { 24 }
46+ priority
47+ />
48+ </ a >
49+ </ div >
50+ </ div >
5851
59- < div className = { styles . grid } >
60- < a
61- href = "https://beta.nextjs.org/docs?utm_source=create-next-app& utm_medium = appdir - template & utm_campaign = create - next - app "
62- className = { styles . card }
63- target = "_blank"
64- rel = "noopener noreferrer"
65- >
66- < h2 className = { inter . className } >
67- Docs < span > -></ span >
68- </ h2 >
69- < p className = { inter . className } >
70- Find in-depth information about Next.js features and API.
71- </ p >
72- </ a >
52+ < div className = { styles . center } >
53+ < Image
54+ className = { styles . logo }
55+ src = "/next.svg"
56+ alt = "Next.js Logo"
57+ width = { 180 }
58+ height = { 37 }
59+ priority
60+ />
61+ < div className = { styles . thirteen } >
62+ < Image src = "/thirteen.svg" alt = "13" width = { 40 } height = { 31 } priority />
63+ </ div >
64+ </ div >
7365
74- < a
75- href = "https://vercel.com/templates?framework=next.js& utm_source = create - next - app & utm_medium = appdir - template & utm_campaign = create - next - app "
76- className = { styles . card }
77- target = "_blank"
78- rel = "noopener noreferrer"
79- >
80- < h2 className = { inter . className } >
81- Templates < span > -></ span >
82- </ h2 >
83- < p className = { inter . className } > Explore the Next.js 13 playground.</ p >
84- </ a >
66+ < div className = { styles . grid } >
67+ < a
68+ href = "https://beta.nextjs.org/docs?utm_source=create-next-app& utm_medium = appdir - template & utm_campaign = create - next - app "
69+ className = { styles . card }
70+ target = "_blank"
71+ rel = "noopener noreferrer"
72+ >
73+ < h2 className = { inter . className } >
74+ Docs < span > -></ span >
75+ </ h2 >
76+ < p className = { inter . className } >
77+ Find in-depth information about Next.js features and API.
78+ </ p >
79+ </ a >
8580
86- < a
87- href = "https://vercel.com/new?utm_source=create-next-app& utm_medium = appdir - template & utm_campaign = create - next - app "
88- className = { styles . card }
89- target = "_blank"
90- rel = "noopener noreferrer"
91- >
92- < h2 className = { inter . className } >
93- Deploy < span > -></ span >
94- </ h2 >
95- < p className = { inter . className } >
96- Instantly deploy your Next.js site to a shareable URL with Vercel.
97- </ p >
98- </ a >
99- </ div >
100- </ main >
101- ) ;
81+ < a
82+ href = "https://vercel.com/templates?framework=next.js& utm_source = create - next - app & utm_medium = appdir - template & utm_campaign = create - next - app "
83+ className = { styles . card }
84+ target = "_blank"
85+ rel = "noopener noreferrer"
86+ >
87+ < h2 className = { inter . className } >
88+ Templates < span > -></ span >
89+ </ h2 >
90+ < p className = { inter . className } > Explore the Next.js 13 playground.</ p >
91+ </ a >
92+
93+ < a
94+ href = "https://vercel.com/new?utm_source=create-next-app& utm_medium = appdir - template & utm_campaign = create - next - app "
95+ className = { styles . card }
96+ target = "_blank"
97+ rel = "noopener noreferrer"
98+ >
99+ < h2 className = { inter . className } >
100+ Deploy < span > -></ span >
101+ </ h2 >
102+ < p className = { inter . className } >
103+ Instantly deploy your Next.js site to a shareable URL with Vercel.
104+ </ p >
105+ </ a >
106+ </ div >
107+ </ main >
108+ ) ;
102109}
0 commit comments