Zarządzanie treścią i danymi statycznymi w Next.js

Zarządzanie treścią i danymi statycznymi w Next.js

Na drodze tworzenia Next.js aplikacji wydajne zarządzanie treścią i danymi statycznymi ma kluczowe znaczenie dla bezproblemowego działania użytkownika. W tym artykule opisano sposób tworzenia stron dokumentacji przy użyciu markdown i efektywnego zarządzania danymi statycznymi przy użyciu public katalogu w programie Next.js.

Tworzenie stron dokumentacji za pomocą Markdown

Dokumentacja jest integralną częścią każdej aplikacji internetowej. W programie Next.js można łatwo tworzyć strony dokumentacji, korzystając z markdown lekkiego języka znaczników. W tym celu możemy skorzystać z react-markdown biblioteki, która pozwala nam renderować markdown treści jako komponenty React.

Najpierw zainstalujmy react-markdown bibliotekę za pomocą npm lub przędzy:

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

Teraz utwórzmy stronę dokumentacji o nazwie documentation.md w pages katalogu:

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

Następnie utwórz plik o nazwie documentation.js w pages katalogu, aby wyrenderować markdown zawartość:

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;  

W tym przykładzie documentationContent zmienna zawiera markdown treść, a ReactMarkdown komponent z react-markdown biblioteki służy do renderowania jej w formacie HTML.

Zarządzanie danymi statycznymi za pomocą Public katalogu

W programie Next.js katalog public jest specjalnym folderem służącym do udostępniania zasobów statycznych, takich jak obrazy, czcionki i inne pliki. Ten katalog jest dostępny z katalogu głównego aplikacji.

Aby dołączyć obraz znajdujący się w public katalogu, możesz użyć następującego kodu w swoim komponencie:

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

Ten kod będzie odwoływał się do obrazu o nazwie image.png znajdującego się w public katalogu.

Wniosek

W tej sekcji nauczyłeś się, jak tworzyć strony dokumentacji za pomocą markdown i react-markdown biblioteki, a także jak zarządzać danymi statycznymi za pomocą public katalogu w Next.js. Techniki te pomogą Ci zapewnić kompleksową zawartość i skutecznie zarządzać zasobami statycznymi w Twojej Next.js aplikacji.