Tabbas, da aka ba da umarnin ku, ga samfurin SEO-abotaka, dogon bulogi mai tsayi akan ƙirƙirar Next.js App a cikin TypeScript:
Ƙirƙirar aikace-aikacen Next.js na iya zama ɗawainiya mai ban tsoro, musamman ga novice. Da farko an ƙirƙira don sauƙaƙe aikace-aikacen React da aka yi sabar, Next.js yanzu ya samo asali don tallafawa ƙirƙirar rukunin yanar gizo da ma'ana ta gefen abokin ciniki. Yana ci gaba da ingantawa - ana iya sauƙaƙe tsarin saita wannan tare da TypeScript, babban juzu'i na JavaScript wanda ke ba da fasalulluka na harshe na yau da kullun kamar bugu mai ƙarfi, musaya, da nau'ikan ƙira.
Me yasa TypeScript? TypeScript yana ba masu haɓaka damar yin aiki da kyau ta hanyar ingantaccen kulawa, kewayawa, kammalawa ta atomatik, da gano kuskure.
Me yasa Gaba.js? Next.js yana sauƙaƙa tsarin saitin, sarrafa lamba ta atomatik, sakewa mai zafi, da ma'anar duniya. Yana da cikakken extensible kuma yana aiki ba tare da matsala ba tare da ɗakunan karatu da yawa kamar Redux da Styled-Components.
Ƙirƙirar App na Next.js tare da TypeScript
Don farawa, bari mu shigar Next.js, TypeScript, da sanarwar TypeScript don React da Node:
npm init -y npm install --save react react-dom next npm install --save-dev typescript @types/react @types/node
Na gaba, buɗe “package.json” a cikin editan ku kuma ƙara rubutun mai zuwa:
{
"scripts": {
"dev": "next"
}
}
Saita TypeScript tare da Next.js
Za mu fara da ƙara daidaitawar TypeScript mai sauƙi. Ƙirƙiri fayil na "tsconfig.json" a tushen aikin ku kuma ƙara:
{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"jsx": "preserve",
"lib": ["dom", "es2017"],
"module": "esnext",
"moduleResolution": "node"
}
}
Sake sabunta tashar ku, gudanar da npm run dev, kuma TypeScript ya kamata yanzu yana aiki.
Gina App
- Ƙirƙiri sabon babban fayil mai suna shafuka.
- A cikin wannan jagorar, ƙirƙiri fayil ɗin index.tsx.
- Ƙara lambar mai zuwa:
import React from 'react'
const Home: React.FunctionComponent = () => {
return <h1>Hello, world!</h1>
}
export default Home
Me muka samu? Mun ƙirƙiri aikace-aikacen Next.js ta amfani da TypeScript. Yanzu zaku iya haɓaka gaba, ƙirƙirar ƙarin hadaddun aikace-aikace tare da ƙarfin TypeScript a cikin kayan aikin ku.
Fashion a duniyar coding ya bambanta da yawa, kuma kamar yadda akwai salon salo mara iyaka, akwai ɗimbin ɗakunan karatu da ginshiƙai. A cikin haɗa Next.js tare da TypeScript, mun ƙirƙiri salo, inganci, da salo don aikace-aikacen gidan yanar gizon mu. Parallaxes masu raye-raye, zane-zane na CSS, da tasirin gani mai ƙarfi, kaɗan ne masu tasowa waɗanda za su iya barin kowane mutum da ba shi da masaniya.
Ka tuna, lambar da ka rubuta ba kawai tana magance matsala ba, har ma tana nuna ma'anar salon ku da fahimtar salon ku a duniyar shirye-shirye. Salon lambar ku yana magana da ƙima game da ƙwarewar ku, iliminku da hangen nesa - koyaushe ku yi ƙoƙarin kiyaye shi da kyau, tsafta da mahimmanci!
