next pages uses absolute url resolver to access api from getInitialProps

package-lock.json

@@ -13533,6 +13533,11 @@
         }
       }
     },
+    "next-absolute-url": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/next-absolute-url/-/next-absolute-url-1.1.1.tgz",
+      "integrity": "sha512-RrRIOJyuoTslfQ3SLQfRlbtFx2ylgOhTb5CaBpUZLPIRrOLUj72/yeHmU2MC1aRfMuW1urL40URypdqECCINdA=="
+    },
     "next-server": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/next-server/-/next-server-9.0.2.tgz",

package.json

@@ -37,6 +37,7 @@
         "mongodb": "^2.1.14",
         "mz": "^2.4.0",
         "next": "^9.0.2",
+        "next-absolute-url": "^1.1.1",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-redux": "^4.4.8",

pages/album/[album].js

@@ -6,6 +6,7 @@ import Article from '../../src/components/Article'
 import Html from '../../src/components/Html'
 import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
+import { createApiUrl } from '../../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -33,8 +34,7 @@ const Page = (props) => (
 Page.getInitialProps = async (ctx) => {
     const pageUrl = '/gallery'
     const id = ctx.query.album
-    const apiUrl = `http://localhost:3000/api/albums/${id}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/albums/${id}`))
     const album = res.data
 
     return {

pages/article/[article].jsx

@@ -8,6 +8,7 @@ import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
 import { Meta } from '../../src/components/Meta'
 import { meta } from '../../src/lib/meta'
+import { createApiUrl } from '../../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -37,8 +38,7 @@ const Page = (props) => (
 Page.getInitialProps = async (ctx) => {
     const pageUrl = '/'
     const id = ctx.query.article
-    const apiUrl = `http://localhost:3000/api/articles/${id}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/articles/${id}`))
     const article = res.data
     const image = article.preview.artifacts.fb
 

pages/articles/[page].jsx

@@ -7,6 +7,7 @@ import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
 import { meta } from '../../src/lib/meta'
 import { Meta } from '../../src/components/Meta'
+import { createApiUrl } from '../../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -32,8 +33,7 @@ Page.getInitialProps = async (ctx) => {
     const pageUrl = '/'
     const page = parseInt(ctx.query.page)
     const pageSize = parseInt(ctx.query.pageSize) || 15
-    const apiUrl = `http://localhost:3000/api/articles?page=${page}&pageSize=${pageSize}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/articles?page=${page}&pageSize=${pageSize}`))
     const articles = res.data.items
     const nextPage = res.data.nextPage
     const prevPage = res.data.prevPage

pages/collective.jsx

@@ -9,6 +9,7 @@ import { CardList } from '../src/components/CardList'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { meta } from '../src/lib/meta'
+import { createApiUrl } from '../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -49,13 +50,12 @@ const Page = (props) => (
 
 Page.getInitialProps = async (ctx) => {
     const pageUrl = ctx.req.url
-    const apiUrl = `http://localhost:3000/api/persons`
-    const res = await axios.get(apiUrl)
+
+    const res = await axios.get(createApiUrl(ctx.req, '/api/persons'))
     const persons = res.data.items
     const title = 'Преподаватели Шлиссельбургской ДХШ'
     const imageFile = 'Images/HudozkaCollective2017.jpg'
-    const imageUrl = `http://localhost:3000/api/image?file=${imageFile}`
-    const resImage = await axios.get(imageUrl)
+    const resImage = await axios.get(createApiUrl(ctx.req, `/api/image?file=${imageFile}`))
 
     return {
         persons,

pages/document/[document].jsx

@@ -8,6 +8,7 @@ import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
 import { meta } from '../../src/lib/meta'
 import { Meta } from '../../src/components/Meta'
+import { createApiUrl } from '../../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -29,8 +30,7 @@ const Page = (props) => (
 Page.getInitialProps = async (ctx) => {
     const pageUrl = '/documents'
     const id = ctx.query.document
-    const apiUrl = `http://localhost:3000/api/files/${id}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/files/${id}`))
     const file = res.data
 
     return {

pages/documents.jsx

@@ -9,6 +9,7 @@ import { meta } from '../src/lib/meta'
 
 import DocumentList from '../src/components/DocumentList'
 import { unique } from '../src/utils/common'
+import { createApiUrl } from '../src/next-lib'
 
 function getSorted(documents) {
     const compose = (...fns) => value => fns
@@ -111,8 +112,7 @@ const Page = (props) => (
 
 Page.getInitialProps = async (ctx) => {
     const pageUrl = '/documents'
-    const apiUrl = `http://localhost:3000/api/files`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, '/api/files'))
     const files = res.data.items
     const title = 'Документы'
     const collections = getSorted(files)

pages/gallery.jsx

@@ -9,6 +9,7 @@ import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { splitBy } from '../src/lib/array'
 import { meta } from '../src/lib/meta'
+import { createApiUrl } from '../src/next-lib'
 
 const albumsByYear = splitBy(album => new Date(album.date).getFullYear())
 
@@ -83,8 +84,7 @@ const Page = (props) => (
 
 Page.getInitialProps = async (ctx) => {
     const pageUrl = ctx.req.url
-    const apiUrl = `http://localhost:3000/api/albums`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/albums`))
     const items = res.data.items
     const albumCollections = albumsByYear(items)
     const title = 'Галерея'

pages/index.jsx

@@ -8,6 +8,7 @@ import { HudozkaTitle } from '../src/components/HudozkaTitle'
 import menuModel from '../src/models/menu'
 import { meta } from '../src/lib/meta'
 import { buildMenu } from '../src/lib/menu'
+import { createApiUrl } from '../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -36,8 +37,7 @@ Page.getInitialProps = async (ctx) => {
     const pageUrl = '/'
     const page = 1
     const pageSize = ctx.query.pageSize || 15
-    const apiUrl = `http://localhost:3000/api/articles?page=${page}&pageSize=${pageSize}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/articles?page=${page}&pageSize=${pageSize}`))
     const articles = res.data.items
     const nextPage = res.data.nextPage
     const prevPage = res.data.prevPage

pages/next.jsx

@@ -7,6 +7,7 @@ import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { Meta } from '../src/components/Meta'
 import { meta } from '../src/lib/meta'
+import { createApiUrl } from '../src/next-lib'
 
 const Index = (props) => (
     <App
@@ -32,8 +33,7 @@ const Index = (props) => (
 Index.getInitialProps = async (ctx) => {
     const pageUrl = ctx.req.url
     // // const pageUrl = '/neighbors/2018'
-    const apiUrl = `http://localhost:3000/api/page?page=${pageUrl}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/page?page=${pageUrl}`))
     const page = res.data
     const image = page.preview.artifacts.fb
 

pages/schedule.jsx

@@ -6,6 +6,7 @@ import Schedule from '../src/components/Schedule'
 import Share from '../src/components/Share'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
+import { createApiUrl } from '../src/next-lib'
 
 const Page = (props) => (
     <App
@@ -31,8 +32,7 @@ Page.getInitialProps = async (ctx) => {
     const pageUrl = ctx.req.url
     const period = '2016-2017'
     const semester = 'spring'
-    const apiUrl = `http://localhost:3000/api/schedule?period=${period}&semester=${semester}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/schedule?period=${period}&semester=${semester}`))
     const schedule = res.data
 
     return {

pages/teacher/[person].jsx

@@ -7,6 +7,7 @@ import { Meta } from '../../src/components/Meta'
 import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
 import { meta } from '../../src/lib/meta'
+import { createApiUrl } from '../../src/next-lib'
 
 const Index = (props) => (
     <App
@@ -29,8 +30,7 @@ const Index = (props) => (
 Index.getInitialProps = async (ctx) => {
     const pageUrl = '/collective'
     const id = ctx.query.person
-    const apiUrl = `http://localhost:3000/api/persons/${id}`
-    const res = await axios.get(apiUrl)
+    const res = await axios.get(createApiUrl(ctx.req, `/api/persons/${id}`))
     const person = res.data
     const name = person.name || []
     const title = name.join(' ')

src/next-lib.js

@@ -0,0 +1,7 @@
+import absoluteUrl from 'next-absolute-url'
+
+export function createApiUrl(req, path) {
+    const { origin } = absoluteUrl(req, 'localhost:3000')
+
+    return `${origin}${path}`
+}