Как использовать функции сервера во время первоначального рендеринга в Next.js 13? ⇐ Javascript

[Гость]

Я пытался создать фиктивный проект блога, чтобы лучше понять Next 13, но наткнулся на блок, пытаясь создать пагинатор. В настоящее время у меня есть каталог сообщений, который работает на сервере и использует компонент PostPageComponent.

"использовать сервер"; импортировать PostsPageComponent из «@/app/comComponents/posts/Posts»; функция PostsPage() { возвращаться ( ); } экспортировать PostsPage по умолчанию; Затем у меня есть вышеупомянутый компонент, который работает на клиенте и имеет две функции: «Posts» и «PostComponentsPage», где первая берет информацию из локального каталога сообщений и перечисляет их как отдельные сообщения, тогда как второй также добавляет компонент разбиения на страницы.

"использовать клиент"; импортировать {useState} из «реагировать»; импортируйте getPosts из «@/app/lib/getPosts/getPosts»; импортировать ссылку из «next/link»; импортировать Paginator из "./Paginator"; функция экспорта Сообщений({страница = 1, прочтение }) { const messages = getPosts (страница, чтение); возвращаться ( {Array.isArray(сообщения) && сообщения.map((сообщение) => { возвращаться ( [*] {post.fileName.replace(/\.mdx$/, "")} {post.fileContents.slice(0, 50)}...
); })} ); } экспортировать функцию по умолчанию PostsPageComponent() { const [currentPage, setCurrentPage] = useState(1); константные сообщенияPerPage = 10; возвращаться (
); } Вот пагинатор.

экспортировать функцию по умолчанию Paginator({ currentPage, setCurrentPage }) { возвращаться ( {текущая страница > 1 && ( setCurrentPage(currentPage - 1)}> Предыдущий )} setCurrentPage(currentPage + 1)}>Далее ); } И, наконец, функция getPosts.

"использовать сервер"; импортировать фс из «фс»; импортировать путь из «пути»; экспортировать const getPostsDirectory = async () => { return path.join(process.cwd(), "сообщения"); }; экспортировать асинхронную функцию по умолчанию getPosts(page = 1, n) { const startIndex = (страница - 1) * n; const endIndex = страница * n; const PostsDirectory = ждут getPostsDirectory(); const fileNames = fs.readdirSync(postsDirectory).splice(startIndex, endIndex); константные сообщения = имена файлов .map((имя_файла) => { const fullPath = path.join(postsDirectory, `${fileName}`); если (fs.statSync(fullPath).isFile()) { const fileContents = fs.readFileSync(fullPath, "utf8"); const parsedFileName = fileName.replace(/\.[^/.]+$/, ""); // Удаляем все после (включая) точку возвращаться { имя_файла: проанализированноеИмяФайла, fileContents: fileContents, }; } }) .filter(логическое значение); обратные посты; } Я также должен добавить, что до того, как я начал это путешествие, чтобы добавить пагинатор, основные функции блога работали нормально, прошу прощения за спагетти кода. У меня еще нет большого опыта работы с новым Next.js.

И как всегда спасибо!