Я создаю приложение с Next.js v6, и я хотел бы заполнить страницы результатами из локальной базы данных mongodb.
В идеале хотелось бы сделать что-нибудь простенькое, как этот пример из учебника, но вместо использования API-выборки просто отправьте запрос моему mongodb на localhost.
Пример из учебника Next.js
import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'
const Index = (props) => (
<Layout>
<h1>Batman TV Shows</h1>
<ul>
{props.shows.map(({show}) => (
<li key = {show.id}>
<Link as = {`/p/${show.id}`} href = {`/post?id=${show.id}`}>
<a>{show.name}</a>
</Link>
</li>
))}
</ul>
</Layout>
)
Index.getInitialProps = async function() {
const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
const data = await res.json()
console.info(`Show data fetched. Count: ${data.length}`)
return {
shows: data
}
}
export default Index
Моя проблема заключается в том, чтобы попытаться подключить мою базу данных и открыть ее для приложения, чтобы я мог сделать что-то вроде этого на странице с именами resources.js:
import Layout from '../components/Layout'
import Link from 'next/link'
const Resources = (props) => {
<Layout>
<h3>Resources</h3>
<ul style = {listStyle}>
{props.resources.map(({resource}) => (
<li key = {resource._id}>
<Link href = {resource.link}>
<a>{resource.title}</a>
</Link>
</li>
))}
</ul>
</Layout>
};
Resources.getInitialProps = async function() {
// get query from mongo DB
// req is 'undefined' -- I want to see the db here
const list = await req.db.get('resources').find();
return list;
}
export default Resources;
Но я не знаю, как я могу открыть базу данных в функции, к которой можно получить доступ со страниц в любом месте приложения. Кажется, что в более старых руководствах с примерами использовалось что-то вроде server.use((req, res, next) => { req.db = dbToExpose }); в основном файле index.js, но это не работает с Next.js v. 6 ??
Например, этот образец репо из этот учебник, похоже, не работает для меня с последней версией Next.js. Открытая база данных через req.db отображается как «undefined», когда вы пытаетесь получить к ней доступ со страницы. Но, возможно, я упускаю какую-то другую проблему.
Вот моя попытка в моем базовом файле сервера раскрыть базу данных, чтобы я мог получить к ней доступ из файлов в pages/:
const express = require('express')
const next = require('next')
const monk = require('monk')('localhost/myDatabase')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = express()
// This is not working to expose the db!
server.use((req, res, next) => {
req.db = monk
next()
});
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.info('> Ready on http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно будет обернуть вашу Mongo DB в API, который вы могли бы использовать со следующим сервером, чтобы избежать проблем с CORS. Next не предоставляет страницам экспресс-запрос, поскольку он недоступен при рендеринге клиента.
Привет @BillD, я просто предположил, что это может быть проще. Я обычно также держу их отдельно, обслуживая API из облачных функций, но часто бывает проще сохранить исходный код вместе и не беспокоиться о нескольких учетных записях хостинга и т. д. Рад, что у вас получилось!
вы не должны раскрывать какие-либо защищенные данные или подключаться к базе данных на страницах Nextjs. Этот пост показывает способ подключиться к базе данных с помощью NextJs без api
В итоге я создал интерфейс API (в том же приложении, что и NextJS индивидуальный экспресс-сервер), но это также действительно интересный способ решения проблемы. Спасибо. Когда я впервые задал вопрос, я просто учился и не понимал, что такое API и подключение к базам данных.
API - необходимая вещь при работе с NextJs. Но на стороне сервера, я думаю, будет лучше, если мы сможем сделать прямой вызов службы без вызова внутреннего API. Таким образом мы можем сократить время рендеринга на стороне сервера.
Да, мне было интересно, возможно ли что-то подобное раньше, именно по этой причине (сокращение времени SSR). Спасибо.
Я думаю, что именно этим я и закончил. Но я создал отдельный экспресс-сервер API, который подключается к Mongo DB с помощью Mongoose, а затем я просто выполняю все вызовы db в API через HTTP-запросы. На моем сервере API я добавил
res.header("Access-Control-Allow-Origin", "*");и т. д., Чтобы смягчить проблемы CORS. Но вы говорите, что может быть лучше просто поместить весь этот API на тот же экспресс-сервер, на котором работает следующий?