Muidugi, järgides teie juhiseid, on siin SEO-sõbralik pika vormiga ajaveebipostituse näide rakenduse Next.js loomise kohta TypeScriptis:
Rakenduse Next.js loomine võib olla hirmutav ülesanne, eriti algajatele. Algselt serveris renderdatud Reacti rakenduste hõlbustamiseks välja töötatud Next.js on nüüdseks arenenud nii, et see toetab saidi staatilist genereerimist ja kliendipoolset renderdamist. See läheb aina paremaks – selle seadistamise protsessi saab veelgi lihtsamaks muuta TypeScriptiga, staatiliselt trükitud JavaScripti superkomplektiga, mis pakub peavoolu keelefunktsioone, nagu tugev tippimine, liidesed ja geneerilised andmed.
Miks TypeScript? TypeScript võimaldab arendajatel töötada tõhusamalt tänu täiustatud hooldatavusele, navigeerimisele, automaatsele täitmisele ja vigade tuvastamisele.
Miks Next.js? Next.js lihtsustab häälestusprotsessi, käsitledes automaatselt koodi jagamist, kuuma taaslaadimist ja universaalset renderdamist. See on täielikult laiendatav ja töötab sujuvalt paljude teekidega, nagu Redux ja Styled-Components.
Rakenduse Next.js loomine TypeScriptiga
Alustuseks installime Next.js, TypeScript ja TypeScripti deklaratsioonid Reacti ja Node jaoks:
npm init -y npm install --save react react-dom next npm install --save-dev typescript @types/react @types/node
Järgmisena avage redaktoris fail „package.json” ja lisage järgmine skript:
{
"scripts": {
"dev": "next"
}
}
TypeScripti seadistamine rakendusega Next.js
Alustame lihtsa TypeScripti konfiguratsiooni lisamisega. Looge oma projekti juurtes fail „tsconfig.json” ja lisage:
{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"jsx": "preserve",
"lib": ["dom", "es2017"],
"module": "esnext",
"moduleResolution": "node"
}
}
Värskendage oma terminali, käivitage npm run dev ja TypeScript peaks nüüd töötama.
Rakenduse loomine
- Looge uus kaust nimega leheküljed.
- Looge selles kataloogis fail index.tsx.
- Lisage järgmine kood:
import React from 'react'
const Home: React.FunctionComponent = () => {
return <h1>Hello, world!</h1>
}
export default Home
Mida me saavutanud oleme? Lõime just TypeScripti abil rakenduse Next.js. Nüüd saate edasi liikuda, luues keerukamaid rakendusi oma tööriistakomplekti kuuluva TypeScripti vastupidavuse abil.
Mood kodeerimise maailmas on uskumatult mitmekesine ja nii nagu on lõputult moe stiile, on ka hulgaliselt kodeerimisteeke ja -raamistikke. Kombineerides Next.js ja TypeScript, oleme loonud oma veebirakendusele stiilse, tõhusa ja trendika välimuse. Animeeritud parallaksid, CSS-joonised ja dünaamilised visuaalsed efektid on vähesed suundumused, mis võivad jätta iga asjatundmatu inimese lummatud.
Pidage meeles, et teie kirjutatud kood ei lahenda ainult probleemi, vaid peegeldab ka teie stiilitunnetust ja arusaama moest programmeerimismaailmas. Teie kodeerimismood räägib palju teie oskustest, teadmistest ja ettenägelikkusest – püüdke alati hoida seda šikk, korras ja oluline!
