Next.js - エラー：絶対URLだけがサポートされています

Question

私はnext.jsのカスタムサーバーとしてexpressを使用しています私は製品

ステップ1のリストに製品をクリックするとすべてが、罰金です：私は

ステップ2商品リンクをクリックしてください：それは、データベース内の製品が表示されます。

私は/productsページを更新する場合は、私が

Serverコード（/productsエンドポイントを見てください）

app.prepare() 
.then(() => { 
    const server = express() 

    // This is the endpoints for products 
    server.get('/api/products', (req, res, next) => { 
    // Im using Mongoose to return the data from the database 
    Product.find({}, (err, products) => { 
     res.send(products) 
    }) 
    }) 

    server.get('*', (req, res) => { 
    return handle(req, res) 
    }) 

    server.listen(3000, (err) => { 
    if (err) throw err 
    console.log('> Ready on http://localhost:3000') 
    }) 
}) 
.catch((ex) => { 
    console.error(ex.stack) 
    process.exit(1) 
}) 

ページこのエラーを取得します - 製品。 js（製品のjsonデータをループするシンプルなレイアウト）

import Layout from '../components/MyLayout.js' 
import Link from 'next/link' 
import fetch from 'isomorphic-unfetch' 

const Products = (props) => (
    <Layout> 
    <h1>List of Products</h1> 
    <ul> 
     { props.products.map((product) => (
     <li key={product._id}>{ product.title }</li> 
    ))} 
    </ul> 
    </Layout> 
) 

Products.getInitialProps = async function() { 

    const res = await fetch('/api/products') 
    const data = await res.json() 

    console.log(data) 
    console.log(`Showed data fetched. Count ${data.length}`) 

    return { 
    products: data 
    } 
} 

export default Products 

Answer 1

エラーが発生したため、作成中のfetchの絶対URLを使用する必要があります。私はそれがあなたのコードが実行されることができる異なる環境（クライアント&サーバ）と関係があると仮定しています。この場合、相対URLは明示的には&で十分ではありません。これを解決する

一つの方法は、ちょうど別のは、ご使用の環境に反応するconfigモジュール設定するには、あなたのfetchリクエストにサーバのアドレスをハードコーディングすることです：

/config/index.jsを

const dev = process.env.NODE_ENV !== 'production'; 

export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com'; 

products.js

import { server } from '../config'; 

// ... 

Products.getInitialProps = async function() { 

    const res = await fetch(`${server}/api/products`) 
    const data = await res.json() 

    console.log(data) 
    console.log(`Showed data fetched. Count ${data.length}`) 

    return { 
    products: data 
    } 
}