Next.js Basisprincipes: pagina's maken en basis Routing uitgelegd

Bij het ontwikkelen van webapplicaties is het beheren van pagina's en het navigeren daartussen een cruciaal aspect. In deze serie artikelen gaan we dieper in op de basisbeginselen van het maken van pagina's en het implementeren van navigatie in Next.js. Deze fundamentele concepten zijn essentieel voor het bouwen van flexibele en beheerbare webapplicaties.

De eerste pagina maken en weergeven

Laten we eerst eens kijken hoe we een eenvoudige pagina in Next.js. U kunt pagina's maken door bestanden te maken in de pages map van uw project. Als u bijvoorbeeld een welkomstpagina wilt maken, kunt u een bestand maken met de naam welcome.js in de pages map.

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

In het bovenstaande codefragment hebben we een eenvoudige welkomstpagina gemaakt. /welcome Wanneer u het pad in uw webbrowser opent, ziet u het bericht "Welkom bij Next.js !" weergegeven.

Eenvoudig Routing

Next.js biedt een robuust en intuïtief routing systeem dat het navigeren tussen pagina's eenvoudig maakt. Routing in Next.js is gebaseerd op de pages map, waarbij elk bestand in deze map overeenkomt met een specifiek pad. about.js Een bestand met de naam in de pages map maakt bijvoorbeeld een pagina aan die toegankelijk is via het /about pad.

Koppelingen en navigatie maken

Om links tussen pagina's te maken en ertussen te navigeren, kunnen we de <Link> component uit de next/link bibliotheek gebruiken. Hieronder ziet u een voorbeeld van het maken van een link van de welkomstpagina naar de over ons-pagina.

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

Wanneer u in het bovenstaande voorbeeld op de link 'Meer informatie over ons' klikt, wordt u doorgestuurd naar de /about pagina.

Conclusie

In deze sectie hebben we onderzocht hoe u eenvoudige pagina's kunt maken en weergeven in Next.js en hoe u navigatie tussen pagina's kunt implementeren met behulp van de pages directory en de <Link> component. Dit zijn cruciale eerste stappen bij het bouwen van een Next.js applicatie. In de komende artikelen zullen we doorgaan met het verkennen van andere aspecten van Next.js het bouwen van dynamische en interactieve webapplicaties.