Ngatur Konten lan Data Statis ing Next.js

Ngatur Konten lan Data Statis ing Next.js

Ing perjalanan ngembangake Next.js aplikasi, ngatur konten lan data statis kanthi efisien penting kanggo pengalaman pangguna sing lancar. Artikel iki nylidiki carane nggawe kaca dokumentasi nggunakake markdown lan carane efektif ngatur data statis nggunakake public direktori ing Next.js.

Nggawe Kaca Dokumentasi karo Markdown

Dokumentasi minangka bagean integral saka aplikasi web apa wae. Ing Next.js, sampeyan bisa nggawe kaca dokumentasi kanthi gampang kanthi nggunakake markdown basa markup sing entheng. Kanggo entuk iki, kita bisa nggunakake react-markdown perpustakaan, sing ngidini kita nggawe markdown konten minangka komponen React.

Pisanan, ayo nginstal react-markdown perpustakaan nggunakake npm utawa benang:

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

Saiki, ayo nggawe kaca dokumentasi sing dijenengi documentation.md ing pages direktori:

# 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...  
  

Sabanjure, gawe file sing dijenengi documentation.js ing pages direktori kanggo nggawe markdown konten:

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;  

Ing conto iki, documentationContent variabel ngemot markdown isi, lan ReactMarkdown komponen saka react-markdown perpustakaan digunakake kanggo nerjemahake minangka HTML.

Ngatur Data Statis nganggo Public Direktori

Ing Next.js, public direktori minangka folder khusus sing digunakake kanggo nglayani aset statis kaya gambar, font, lan file liyane. Direktori iki bisa diakses saka root aplikasi sampeyan.

Kanggo nyakup gambar sing ana ing public direktori, sampeyan bisa nggunakake kode ing ngisor iki ing komponen sampeyan:

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

Kode iki bakal ngrujuk gambar sing dijenengi image.png sing ana ing public direktori kasebut.

Kesimpulan

Ing bagean iki, sampeyan wis sinau carane nggawe kaca dokumentasi nggunakake markdown lan react-markdown perpustakaan, uga carane ngatur data statis nggunakake public direktori ing Next.js. Teknik kasebut bakal mbantu sampeyan nyedhiyakake konten sing komprehensif lan ngatur aset statis kanthi efektif ing Next.js aplikasi sampeyan.