Sarrafa Abun ciki da Tsayayyen Bayanai a ciki Next.js

Sarrafa Abun ciki da Tsayayyen Bayanai a ciki Next.js

A cikin tafiya na haɓaka Next.js aikace-aikacen, ingantaccen sarrafa abun ciki da bayanan tsayayyen abu yana da mahimmanci don ƙwarewar mai amfani mara kyau. Wannan labarin yana bincika yadda ake ƙirƙirar shafukan daftarin aiki ta amfani markdown da yadda ake sarrafa bayanan da ba daidai ba ta amfani da public kundin adireshi a cikin Next.js.

Ƙirƙirar Shafukan Takardu tare da Markdown

Takaddun bayanai wani bangare ne na kowane aikace-aikacen yanar gizo. A cikin Next.js, zaku iya ƙirƙirar shafukan daftarin aiki cikin sauƙi ta amfani da markdown, harshe mara nauyi mara nauyi. Don cimma wannan, za mu iya yin amfani da react-markdown ɗakin karatu, wanda ke ba mu damar yin markdown abun ciki azaman abubuwan da aka gyara.

Da farko, bari mu shigar da react-markdown ɗakin karatu ta amfani da npm ko yarn:

npm install react-markdown  
# or  
yarn add react-markdown  

Yanzu, bari mu ƙirƙiri wani shafi mai suna documentation.md a cikin pages kundin adireshi:

# Welcome to Our Documentation  
  
In this section, we'll explore the features of our application and how to get started.  
  
## Getting Started  
  
To start using our application, follow these steps...  
  
## Features  
  
Our application offers the following features...  
  

Na gaba, ƙirƙiri fayil mai suna documentation.js a cikin pages kundin adireshin don yin markdown abun ciki:

import React from 'react';  
import ReactMarkdown from 'react-markdown';  
  
const documentationContent = `# Welcome to Our Documentation\n\nIn this section, we'll explore the features of our application and how to get started.\n\n## Getting Started\n\nTo start using our application, follow these steps...\n\n## Features\n\nOur application offers the following features...`;  
  
function Documentation() {  
  return( 
    <div>  
      <h1>Documentation</h1>  
      <ReactMarkdown>{documentationContent}</ReactMarkdown>  
    </div>  
 );  
}  
  
export default Documentation;  

A cikin wannan misali, documentationContent canjin ya ƙunshi markdown abun ciki, kuma an yi amfani ReactMarkdown da ɓangaren react-markdown ɗakin karatu don mayar da shi azaman HTML.

Sarrafa Static Data tare da Public Directory

A cikin Next.js, public kundin adireshi babban fayil ne na musamman da ake amfani da shi don hidimar kaddarori masu tsayi kamar hotuna, fonts, da sauran fayiloli. Ana iya samun damar wannan littafin daga tushen aikace-aikacen ku.

Don haɗa hoton da ke cikin public kundin adireshi, zaku iya amfani da lambar mai zuwa a cikin ɓangaren ku:

<img src="/image.png" alt="An example image" />

Wannan lambar za ta yi la'akari da hoton image.png da ke cikin public kundin adireshi.

Kammalawa

A cikin wannan sashe, kun koyi yadda ake ƙirƙirar shafukan daftarin aiki ta amfani markdown da react-markdown ɗakin karatu, da kuma yadda ake sarrafa bayanan tsaye ta amfani da public kundin adireshi a cikin Next.js. Waɗannan fasahohin za su taimaka muku samar da cikakkun abun ciki da sarrafa daidaitattun kadarori a cikin Next.js aikace-aikacenku.