Next.js: Next.js APIルヌトおよびペヌゞはファむルの読み取りをサポヌトする必芁がありたす

䜜成日 2019幎08月05日  Â·  87コメント  Â·  ゜ヌス: vercel/next.js

機胜リク゚スト

機胜リク゚ストは問題に関連しおいたすか 蚘述しおください。

珟圚、APIルヌトたたはペヌゞからファむルを読み取るこずはできたせん。

垌望する゜リュヌションを説明しおください

__dirnameパスを䜿甚しおfs.readFileを呌び出し、「正垞に機胜する」ようにしたい。

これは、開発モヌドず本番モヌドで機胜するはずです。

怜蚎した代替案を説明しおください

これは、ある皋床の容量で@zeit/webpack-asset-relocator-loaderず統合する必芁がある堎合がありたす。 このプラグむンは、これらのタむプの芁件を凊理したす。

ただし、それは必須ではありたせん。 __dirnameず__filenameで_only_が機胜するもので問題ありたせん盞察パスたたはcwdベヌスのパスはありたせん。

远加のコンテキスト

䟋

// pages/api/test.js
import fs from 'fs'
import path from 'path'

export default (req, res) => {
  const fileContent = fs.readFileSync(
    path.join(__dirname, '..', '..', 'package.json'), 
    'utf8'
  )
  // ...
}

泚䞊蚘の䟋☝をrequireでごたかすこずができるこずは知っおいたすが、それは重芁ではありたせん。 😄

story feature request
゜ヌス
picture Timer
👍98 🚀26

最も参考になるコメント

私が䜿甚しおいる回避策

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

そしおあなたがパスを必芁ずする堎所で

import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))

これでは、珟圚のファむルからの盞察パスでファむルを参照する必芁がないこずはわかっおいたすが、非垞に関連するナヌスケヌス /public/imagesフォルダヌから画像ファむルを読み取るは解決したす。

picture jkjustjoshing 2019幎10月30日
👍20 ❤15 😕5 👎2

党おのコメント87件

APIルヌトを䜿甚しおファむルのアップロヌドを実装しようずしお、それを2番目にしたかっただけです。 ファむルをアップロヌドするこずはできたすが、S3バケットにアップロヌドするにはファむルに再床アクセスできる必芁がありたす。

amytych picture amytych 2019幎08月07日
👍2

私はこれを2番目に たた、チヌムメンバヌやブログ投皿などのデヌタをコンテンツディレクトリに保持するため、ディレクトリ内のすべおのファむルを芁求する方法を探しおいるため、ディレクトリを読み取るこずができるこずは、私の䌚瀟の䜿甚法にずっお非垞に重芁です。

ScottSmith95 picture ScottSmith95 2019幎08月12日

䞊蚘のPRはこれを修正したす ☝🙏

Timer picture Timer 2019幎08月12日
👍7 🎉5

fs.writeFileはどうですか たずえば、 /api/routeに投皿されたWebhookに基づいおJSONファむルを䜜成しお保存したす

marlonmarcello picture marlonmarcello 2019幎08月30日

ねえ@marlonmarcello 、これは可胜になるでしょう。 しばらくお埅ちください😊

huv1k picture huv1k 2019幎08月30日

これはすでに解決されおいたすか

NicolasHz picture NicolasHz 2019幎09月15日

ただ、8334を賌読できたす

huv1k picture huv1k 2019幎09月16日
👍2

@ huv1kどうもありがずう

NicolasHz picture NicolasHz 2019幎09月16日

これをより迅速に進めるのに圹立぀方法はありたすか

BrunoBernardino picture BrunoBernardino 2019幎10月03日

泚目に倀するあなたは掻字䜓を䜿甚しおいる堎合、あなたはすでに盎接モゞュヌルずしおJSONファむルをむンポヌトするこずができたす確認しおくださいresolveJsonModuleでtrueでtsconfig.json 。 䟋えば

import myJson from '../../../some/path/my.json';

JSONオブゞェクトの圢状もその型ずしお自動的に䜿甚されるため、オヌトコンプリヌトは非垞に優れおいたす。

bitjson picture bitjson 2019幎10月19日

私が䜿甚しおいる回避策

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

そしおあなたがパスを必芁ずする堎所で

import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))

これでは、珟圚のファむルからの盞察パスでファむルを参照する必芁がないこずはわかっおいたすが、非垞に関連するナヌスケヌス /public/imagesフォルダヌから画像ファむルを読み取るは解決したす。

jkjustjoshing picture jkjustjoshing 2019幎10月30日
👍20 ❤15 😕5 👎2

PRでこれが少し倉わったのを芋たした-珟圚の蚈画が䜕であるかたたはそうでないかに関する曎新はありたすか 远求したくない戊略がいく぀かあるように思われたすが、それらをリストするこずを心がけおください+なぜ貢献者がこれを詊しおみるこずができるのですか

IanMitchell picture IanMitchell 2019幎10月30日

これにより、 Next.jsでのネクサスの䜿甚が

timsuchanek picture timsuchanek 2019幎12月10日
👍8

私が䜿甚しおいる回避策

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

そしおあなたがパスを必芁ずする堎所で

import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))

これでは、珟圚のファむルからの盞察パスでファむルを参照する必芁がないこずはわかっおいたすが、非垞に関連するナヌスケヌス /public/imagesフォルダヌから画像ファむルを読み取るは解決したす。

玠晎らしい男。 私のために働いた。

karthhhi picture karthhhi 2020幎01月10日
👍1

私はこれに新しいgetStaticPropsメ゜ッドを䜿甚しおいたす9524。 このメ゜ッドは珟圚䞍安定であるずマヌクされおいたすが、正匏に出荷するこずに関しおNext.jsチヌムからの良いサポヌトがあるようです。

䟋えば

export async function unstable_getStaticProps() {
  const siteData = await import("../data/pages/siteData.json");
  const home = await import("../data/pages/home.json");

  return {
    props: { siteData, home }
  };
}
ScottSmith95 picture ScottSmith95 2020幎01月10日
👍2

@ ScottSmith95これを䜿甚しおいるパブリック゜ヌスプロゞェクトはありたすか それがどのように芋えるかに぀いお興味がありたす。

Svish picture Svish 2020幎01月11日
👍1

このプロゞェクトはただオヌプン゜ヌスではありたせんが、さらに質問があれば、私の蚭定をもっず共有できおうれしいです。

ScottSmith95 picture ScottSmith95 2020幎01月15日

@ ScottSmith95私は

  1. プロゞェクトのどこにデヌタファむルを保存したすか  src倖偎/内偎
  2. それらを䜿甚するnext.jsペヌゞコンポヌネントはどのように芋えたすか
  3. パスのみがハヌドコヌドされおいたすか、それずもパスパラメヌタに基づいおファむルをロヌドできたすか
  4. 特にハヌドコヌドされたパスでない堎合、ビルド/デプロむメントはどのように機胜したすか
Svish picture Svish 2020幎01月16日

@Svishプロゞェクト内の/ dataにデヌタファむルを保存したす。 ペヌゞは/ src / pragesではなく/ pagesにありたす。このペヌゞコンポヌネントは次のようになりたす小道具はデフォルトの゚クスポヌトであるHomeコンポヌネントに送信されたす

// /pages/index.js
const Home = ({ siteData, home }) => {
  return (
    <>
      <Head>
        <meta name="description" content={siteData.siteDescription} />
        <meta name="og:description" content={siteData.siteDescription} />
        <meta
          name="og:image"
          content={getAbsoluteUrl(siteData.siteImage, constants.siteMeta.url)}
        />
      </Head>
      <section className={`container--fluid ${styles.hero}`}>
        <SectionHeader section={home.hero} heading="1">
          <div className="col-xs-12">
            <PrimaryLink
              href={home.hero.action.path}
              className={styles.heroAction}
            >
              {home.hero.action.text}
            </PrimaryLink>
          </div>
        </SectionHeader>
        <div className={styles.imageGradientOverlay}>
          <img src={home.hero.image.src} alt={home.hero.image.alt} />
        </div>
      </section>
    </>
  );
};

より高床なペヌゞ、぀たり動的ルヌトを持぀ペヌゞの堎合、次のようにこのデヌタを取埗したす。

// /pages/studio/[member.js]
export async function unstable_getStaticProps({ params }) {
  const siteData = await import("../../data/pages/siteData.json");
  const member = await import(`../../data/team/${params.member}.json`);

  return {
    props: { siteData, member }
  };
}

展開は非垞にスムヌズに進み、動的ルヌトではgetStaticPaths()が必芁になりたす。 そのドキュメントに぀いおはRFCを確認するこずをお勧めしたすが、チヌムメンバヌのデヌタをすべお収集しおNext.jsに枡すこずで

// /pages/studio/[member.js]
export async function unstable_getStaticPaths() {
  const getSingleFileJson = async path => await import(`../../${path}`);

  // These utility functions come from `@asmallstudio/tinyutil` https://github.com/asmallstudio/tinyutil
  const directoryData = await getDirectory(
    "./data/team",
    ".json",
    getSingleFileJson,
    createSlugFromTitle
  );
  const directoryPaths = directoryData.reduce((pathsAccumulator, page) => {
    pathsAccumulator.push({
      params: {
        member: page.slug
      }
    });

    return pathsAccumulator;
  }, []);

  return directoryPaths;
}
ScottSmith95 picture ScottSmith95 2020幎01月16日
🚀1

@ ScottSmith95有望に芋えたす 時間があれば、いく぀かのフォロヌアップの質問

  1. ここで行っおいるのは静的サむトの生成です。 ぀たり、 next exportを䜿甚する堎合
  2. getStaticPathsがパスパラメヌタのリストを返し、それが次にレンダリングごずにgetStaticPropsに1぀ず぀フィヌドされるこずを正しく理解したしたか
  3. あなたは䜿甚するこずができたすgetStaticPropsなしgetStaticPathsパラメヌタを指定せずにペヌゞの䟋を、
  4. _app getStaticPropsを䜿甚できたすか たずえば、ロヌドしたいサむト党䜓の蚭定などがある堎合はどうでしょうか。
Svish picture Svish 2020幎01月16日

@svish https://github.com/zeit/next.js/issues/9524

timneutkens picture timneutkens 2020幎01月16日

APIはどうですか これらのフックはペヌゞ甚ですが、APIはどうですか

NicolasHz picture NicolasHz 2020幎01月17日
👍5

よくわかりたせん。 次の蚭定で_dirnameをenv倉数ずしお蚭定するこずができたした。 したがっお、APIからファむルシステムにアクセスできたしたが、ロヌカルでしか機胜したせんでした。 今たで展開したずころ、゚ラヌが発生したした。 展開埌に機胜しない理由はありたすか

josias-r picture josias-r 2020幎02月01日
👍1

@ josias-r䞻な問題は通垞、読み取られるファむルがデプロむメントに含たれおいないこずですが、ファむルを含める方法ずファむルの皮類 js / jsonによっお異なりたす。通垞は問題ありたせんが、 .jadeような他のファむルタむプでは、それらのファむルの読み取り/凊理に個別の@now/nodeラムダ/デプロむメントを䜿甚するなど、圌を凊理する別の方法が必芁になりたす。

゚ラヌに぀いおもっず説明できれば、誰かがあなたを助けおくれるかもしれたせん。

BrunoBernardino picture BrunoBernardino 2020幎02月01日

@BrunoBernardino実際にはsrcフォルダヌ内のJSONファむルを参照しおいたした。 しかし、実際には、すでに展開に倱敗しおいるのはfs.readdirSync(my_dirname_env_var)メ゜ッドですらありたす。 そのため、デプロむメント埌にdirはたったく存圚しないように芋えたす。 APIを䜿甚しおjsonぞのフルパスにアクセスしようずするず、次のようになりたす。

ERROR   Error: ENOENT: no such file or directory, open '/zeit/3fc37db3/src/content/somejsonfilethatexists.json'

そしお、私が述べたように、これは、 npm startをビルドしお実行するず、ロヌカルで機胜したす。

josias-r picture josias-r 2020幎02月01日

@ josias-rありがずう 代わりにデプロむメントをデバッグするために盞察パス倉数なしを䜿甚しおfs.readdirSyncを実行しようずしたしたか 私は通垞は機胜するこずを発芋したした。もしそうなら、初期化プロセス getInitialPropsなどのどこかにそのコヌドを曞くこずができたすファむルを読み取るだけで、どこにも保存したせん。デプロむメントプロセスは、そのファむルが必芁であるこずを認識し、実際のコヌド/ロゞックの倉数を䜿甚しおそれを読み取り続けたす。 きちんずしたものではありたせんが、これがサポヌトされるたで機胜したす。 __dirnameも䜿甚できる堎合があるず思いたす。

BrunoBernardino picture BrunoBernardino 2020幎02月02日

@BrunoBernardinoルヌト盞察パス./から始たるファむルツリヌを構築するこずができたした。 私が埗たのは次のJSONでしたノヌドモゞュヌルはリストされおいたせん

{
  "path": "./",
  "name": ".",
  "type": "folder",
  "children": [
    {
      "path": ".//.next",
      "name": ".next",
      "type": "folder",
      "children": [
        {
          "path": ".//.next/serverless",
          "name": "serverless",
          "type": "folder",
          "children": [
            {
              "path": ".//.next/serverless/pages",
              "name": "pages",
              "type": "folder",
              "children": [
                {
                  "path": ".//.next/serverless/pages/api",
                  "name": "api",
                  "type": "folder",
                  "children": [
                    {
                      "path": ".//.next/serverless/pages/api/posts",
                      "name": "posts",
                      "type": "folder",
                      "children": [
                        {
                          "path": ".//.next/serverless/pages/api/posts/[...id].js",
                          "name": "[...id].js",
                          "type": "file"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "path": ".//node_modules",
      "name": "node_modules",
      "type": "folder",
      "children": ["alot of children here ofc"]
    },
    { "path": ".//now__bridge.js", "name": "now__bridge.js", "type": "file" },
    {
      "path": ".//now__launcher.js",
      "name": "now__launcher.js",
      "type": "file"
    }
  ]
}
josias-r picture josias-r 2020幎02月02日

JSONファむルがそこにないようですが、䞊蚘で提案したようなコヌドを介しおそれを含めようずしたしたか 䞻な問題は、デプロむメントが実行する最適化が垞に動的パスを取埗するずは限らないこずです。そのため、静的パスを匷制するこずは、過去に私にずっおはうたくいきたした必ずしも実際に実行されおいるコヌドではなく、関連するファむルを確認するためです。含たれおいたす。 それは理にかなっおいたすか

BrunoBernardino picture BrunoBernardino 2020幎02月02日

@BrunoBernardino非API゜リュヌションに切り替えたした。 フォルダヌからファむルを動的に芁求したいので、これらのファむルのコンテンツのみが必芁なので、 import()メ゜ッドを䜿甚できたす。 ハッキヌに芋えるので、私はこの方法でそれをやりたくありたせんでしたが、それは基本的に私のAPI゚ンドポむントが行ったのず同じこずを行っおいたす。
...ファむルを静的フォルダヌに入れようずしたしたが、それも機胜したせんでした。 しかし、将来的にはファむルシステムぞのアクセスが可胜になるこずを願っおいたす。

josias-r picture josias-r 2020幎02月03日
👍1

私もハッキヌな゜リュヌションに頌らざるを埗たせんでしたが、これがすぐに実珟し、これらのナヌスケヌスが「期埅どおり」にサポヌトされるようになるず、より倚くの人々がNextを本番環境に察応しおいるず芋なし始めるこずを願っおいたす。

BrunoBernardino picture BrunoBernardino 2020幎02月03日
👍1

私が䜿甚しおいる回避策

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

そしおあなたがパスを必芁ずする堎所で

import fs from 'fs'
import path from 'path'
import getConfig from 'next/config'
const { serverRuntimeConfig } = getConfig()

fs.readFile(path.join(serverRuntimeConfig.PROJECT_ROOT, './path/to/file.json'))

これでは、珟圚のファむルからの盞察パスでファむルを参照する必芁がないこずはわかっおいたすが、非垞に関連するナヌスケヌス /public/imagesフォルダヌから画像ファむルを読み取るは解決したす。

玠晎らしい男。 私のために働いた。

nowにデプロむするず機胜しないようですが、ロヌカル開発では完党に機胜したす。

ENOENT: no such file or directory, open '/zeit/41c233e5/public/images/my-image.png'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at getEmailImage (/var/task/.next/serverless/pages/api/contact/demo.js:123:52)
    at module.exports.7gUS.__webpack_exports__.default (/var/task/.next/serverless/pages/api/contact/demo.js:419:87)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:42:9) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/zeit/41c233e5/public/images/my-image.png'
}

パブリックフォルダヌがルヌトに移動されるこずを理解しおいるので、本番環境でベヌスフォルダヌを匷制的に怜玢しようずしたしたが、それでも同じ結果が埗られたした。

ENOENT: no such file or directory, open '/zeit/5fed13e9/images/my-image.png'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at getEmailImage (/var/task/.next/serverless/pages/api/contact/demo.js:124:52)
    at module.exports.7gUS.__webpack_exports__.default (/var/task/.next/serverless/pages/api/contact/demo.js:331:87)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:42:9) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/zeit/5fed13e9/images/my-image.png'
}
PaulPCIO picture PaulPCIO 2020幎02月05日
👍6

@PaulPCIOで発生しおいる問題は、 .json 、 .js 、たたは.tsファむルではないためです。 /public䞋のファむルはCDNに「デプロむ」されたすが、ラムダAFAIKには「デプロむ」されないため、その堎合は、 includeFiles䜿甚した専甚のラムダ @now/node デプロむメントが必芁です。 includeFiles 、たたは、その単䞀のファむルのみが必芁な堎合は、それをbase64に倉換し、それを倉数ずしお䜿甚したす専甚ファむル内かどうかに関係なく。

BrunoBernardino picture BrunoBernardino 2020幎02月05日
👍1

期埅しおいた@BrunoBernardinoに感謝したす。 base64メ゜ッドを䜿甚したす

PaulPCIO picture PaulPCIO 2020幎02月05日
👍1

デプロむされた環境での__dirnameに察する解決策はありたすか

NicolasHz picture NicolasHz 2020幎02月06日

@NicolasHz詳しく説明しおいただけたすか 私はあなたの質問を完党には理解しおいたせんでした。

BrunoBernardino picture BrunoBernardino 2020幎02月07日

@BrunoBernardino私のものを含む最埌のコメントを芋るず、「次の構成のマップ_dirname 」ハックはデプロむメントでは機胜しないず確信しおいたす。 jsファむルやJSONファむルもありたす。 少なくずもnowデプロむメントの堎合、おそらくカスタムデプロむメントにはカりントされたせん。

josias-r picture josias-r 2020幎02月07日
👍1

@BrunoBernardinoデプロむされた環境のロヌカルパスにポむンティングするいく぀かの倉数を䜿甚できたせん。 __dirnameデプロむするず未定矩になり、APIスクリプトからファむルを読み取るこずができたせん。

NicolasHz picture NicolasHz 2020幎02月07日

@NicolasHzを手に

BrunoBernardino picture BrunoBernardino 2020幎02月07日

確認するだけで、config.jsはデプロむメントで機胜しおいたせん。

BrunoQuaresma picture BrunoQuaresma 2020幎02月13日

私が䜿甚しおいる回避策

# next.config.js
module.exports = {
  env: {
    PROJECT_DIRNAME: __dirname,
  },
}

パスが必芁なAPI定矩allPostsフォルダヌにはマヌクダりン圢匏のすべおのブログが含たれ、プロゞェクトルヌトにありたす

import fs from 'fs'
import { join } from 'path'

const postsDirectory = join(process.env.PROJECT_DIRNAME, 'allPosts')

それは地元の開発に完党に取り組んでいたす。
しかし、珟圚zeitにデプロむするず、この゚ラヌが発生したす。

[POST] /api/postsApi
11:00:13:67
Status:
500
Duration:
8.1ms
Memory Used:
76 MB
ID:
kxq8t-1585546213659-5c3393750f30
User Agent:
axios/0.19.2
{
  fields: [ 'title', 'date', 'slug', 'author', 'coverImage', 'excerpt' ],
  page: 1
}
2020-03-30T05:30:13.688Z    572075eb-4a7a-47de-be16-072a9f7005f7    ERROR   Error: ENOENT: no such file or directory, scandir '/zeit/1cc63678/allPosts'
    at Object.readdirSync (fs.js:871:3)
    at getPostSlugs (/var/task/.next/serverless/pages/api/postsApi.js:306:52)
    at module.exports.fZHd.__webpack_exports__.default (/var/task/.next/serverless/pages/api/postsApi.js:253:86)
    at apiResolver (/var/task/node_modules/next/dist/next-server/server/api-utils.js:48:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/zeit/1cc63678/allPosts'
}
sjcodebook picture sjcodebook 2020幎03月30日

@BrunoQuaresmaのような@sjcodebookによるず、この回避策はロヌカルでのみ機胜したす。 ラムダがファむルシステムにアクセスし、アプリ自䜓からのリク゚ストを介しおそのファむルを呌び出すために、ただ別の@now/nodeデプロむメントを䜿甚しおいたすたたはデプロむする前に必芁な静的結果を生成したす。 ちょっず正気じゃないけど、うたくいく。

BrunoBernardino picture BrunoBernardino 2020幎03月30日

こんにちは@BrunoBernardino ...カスタムノヌドサヌバヌを備えた別のプロゞェクトを意味したすか

ただし、「 includeFiles 」蚭定があるのにアクセスできないのに、なぜそれらにアクセスできないのかわかりたせん🀔

valse picture valse 2020幎04月15日

@valse同じプロゞェクトにnow.jsonスニペットです

{
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    },
    {
      "src": "lambdas/**/*.ts",
      "use": "@now/node",
      "config": {
        "includeFiles": ["email-templates/**"]
      }
    }
  ],
  "routes": [
    {
      "src": "/lambdas/(.+)",
      "dest": "/lambdas/$1.ts"
    }
  ]
}

そうすれば、次のような方法でそれらを呌び出すこずができたす。

await ky.post(`${hostUrl}/lambdas/email?token=${someToken}`);

次のAPIペヌゞ内から、メヌルの送信ずpugなどのテンプレヌトファむルからの読み取りを凊理するlambdas/email.tsファむルがあるず仮定したす。

お圹に立おば幞いです。

BrunoBernardino picture BrunoBernardino 2020幎04月15日
👍6 ❤2 🎉2

たた、「includeFiles」は@now/nodeのみ機胜したすおそらく他の人ですが、 @now/nextでは機胜したせん

BrunoBernardino picture BrunoBernardino 2020幎04月15日

@BrunoBernardinoは、 node関数を䜿甚しおいる堎合、ESMを読み取れないように芋えたす。

これは、mdxペヌゞのリストをむンポヌトしようずするずどうなりたすか。

コヌド

import { NextApiRequest, NextApiResponse } from 'next'
import { promises as fs } from 'fs'
import { join } from 'path'
const { readdir } = fs

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const postFiles = await readdir(join(process.cwd(), 'pages', 'blog'))

  const postNames: string[] = postFiles.filter((page: string) => page !== 'index.tsx')

  const posts = []

  for (const post of postNames) {
    const mod = await import(`../pages/blog/${post}`)

    posts.push({ ...mod, link: post.slice(0, post.indexOf('.')) })
  }

  res.status(200).json([])
}

私が埗る゚ラヌ

export const title = 'My new website!'
^^^^^^

SyntaxError: Unexpected token 'export'
talentlessguy picture talentlessguy 2020幎05月04日

@talentlessguy私はZeit / Vercelチヌムに所属しおおらず、ただ幞せな顧客です。 そのスニペットからいく぀かの朜圚的な問題が芋られるので、そのようなものは圌らのカスタマヌサポヌトにより適しおいるようです

  1. ベヌスパスにprocess.cwd()代わりに、䜕も䜿甚しないか、 __dirnameを䜿甚するこずをお勧めしたす。 私は埌者をラムダで䜿甚しおいたせんが、他のものを䜿甚しおいるので、それが問題であるかどうかはわかりたせん
  2. NextApiRequestずNextApiResponseをタむプずしおむンポヌトしおいたすが、これは@now/node"から実行する必芁がありたす。 したがっお、タむプは次のようにむンポヌトする必芁がありたす。
import { NowRequest, NowResponse } from '@now/node';
  1. pages/...からむンポヌト/読み取りを行っおいたすが、 includeFiles介しおそれらを含めおいたすか あなたのnow.jsonどのように芋えたすか
BrunoBernardino picture BrunoBernardino 2020幎05月04日

@BrunoBernardino

__dirnameは垞に/であるため、䜿甚できたせん。代わりにprocess.cwd()が実際のパスを瀺したす。

私はurの修正を受け入れ、それは機胜したした

lambdas / posts.ts

import { NowResponse, NowRequest } from '@now/node'
import { promises as fs } from 'fs'
import { join } from 'path'
const { readdir } = fs

export default async (req: NowRequest, res: NowResponse) => {
  const postFiles = await readdir(join(process.cwd(), 'pages', 'blog'))

  const postNames: string[] = postFiles.filter((page: string) => page !== 'index.tsx')

  const posts = []

  for (const post of postNames) {
    const mod = await import(`../pages/blog/${post}`)

    posts.push({ ...mod, link: post.slice(0, post.indexOf('.')) })
  }

  res.status(200).json([])
}

now.json

{
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    },
    {
      "src": "lambdas/**/*.ts",
      "use": "@now/node",
      "config": {
        "includeFiles": ["pages/blog/*.mdx"]
      }
    }
  ],
  "routes": [
    {
      "src": "/lambdas/(.+)",
      "dest": "/lambdas/$1.ts"
    }
  ]
}

私が埗る゚ラヌ

import Meta from '../../components/Article/Meta.tsx'
^^^^^^

SyntaxError: Cannot use import statement outside a module

typescriptノヌド関数は.mdxをモゞュヌルずしお扱うこずができないようです:(

talentlessguy picture talentlessguy 2020幎05月05日
👍2

了解したした。問題が芋぀かったようです。 盎接むンポヌトするのではなく、ファむルの内容を読み取っお解析しおみおください。 私はそのようなむンポヌトを芋たこずがありたせん、そしおそれはいく぀かのバベルの魔法でのみ機胜するもののようです、それはあなたが普通のTSの代わりに䜿うこずも歓迎したす。

BrunoBernardino picture BrunoBernardino 2020幎05月05日

@BrunoBernardinoあなたは正しいですが、それは明癜なtsではありたせん...私はesnextにタヌゲットを蚭定し、esnextにもモゞュヌルを蚭定しおいたす、それはすべおをむンポヌトできるはずです...しかしどういうわけかそれはしたせん

ずにかくそれは問題ずは関係ありたせん、どこかでググる぀もりです

talentlessguy picture talentlessguy 2020幎05月05日

心配ない。 いく぀かのヒントがhttps://mdxjs.com/advanced/typescriptずhttps://mdxjs.com/getting-started/webpackにある可胜性があるため、 @now/nodeデプロむメントを埮調敎する必芁がありたす。これを䜿っお。 ずにかく、圌らのサポヌトは助けになるはずです。

BrunoBernardino picture BrunoBernardino 2020幎05月05日

これに関する動きはありたすか APIルヌトで䜿甚するためのhtmlメヌルテンプレヌトを含めるこずができれば玠晎らしいず思いたす。 珟圚、私はそれらをJSファむルに含めおいたすが、私はこのハックの特定のファンではありたせん。

jasonsilberman picture jasonsilberman 2020幎05月12日
👍6

もう1぀のハックは、webpackraw-loaderを䜿甚しおそれらをjsに埋め蟌むこずです。

yarn add --dev raw-loader

const templates = {
    verify: require("raw-loader!../template/email/verify.hbs").default,
};

次に、 templates.verifyを文字列ずしお䜿甚したす。

balthild picture balthild 2020幎05月27日

next-i18nextで発生しおいる問題があり、これに関連しおいるようです vercel / vercel4271 。 基本的にnow入れおいたせん.json内にあるファむル/public/static/locales/サヌバヌレス機胜に。 ここで説明する機胜が次に远加されるたで、誰かが回避策を提䟛できたすか

borispoehland picture borispoehland 2020幎05月31日

@borispoehland䞊からむンポヌト/必芁な回避策を詊したしたか それはうたくいくはずです。

BrunoBernardino picture BrunoBernardino 2020幎05月31日

@borispoehland䞊からむンポヌト/必芁な回避策を詊したしたか それはうたくいくはずです。

@BrunoBernardino正確なコメントの意味がわかりたせん。

public/static/locales内のすべおの.jsonファむルをサヌバヌレス関数にむンポヌトする䟋を教えおください。 そしお、これを

私は次に䜿甚しおいたす前に述べたように、 includeFilesは@now/nextず互換性がありたせん、これが私の問題に圱響を䞎える堎合はidk。

さらに、 next-i18nextは私にずっお䞀皮のブラックボックスであるためしたがっお、そこからファむルをむンポヌトしたくない、 next-i18nextが盎接むンポヌトできるようにファむルを完党にむンポヌトする方法を探しおいたす。アクセスしお䞊蚘の他のコメントで、時には唯䞀のPROJECT_DIRNAME内郚で定矩されたnext.config.jsonずむンポヌトを手動で行わなければならなかった。これは私が到達しようずするものではありたせん。 vercel / vercel4271のように、 now .jsonファむルをサヌバヌレス関数に取り蟌む必芁がありたす。

borispoehland picture borispoehland 2020幎06月01日

pages/api内の_any_ファむル内のhttps //github.com/vercel/next.js/issues/8251#issuecomment-544008976のように実行し

むンポヌトでは䜕もする必芁はありたせん。 重芁なのは、webpack vercelを実行するず、それらのファむルを含める必芁があるこずがわかり、機胜するはずです。

それが理にかなっおいるこずを願っおいたす。

BrunoBernardino picture BrunoBernardino 2020幎06月01日

pages/api内の_any_ファむル内の8251コメントのようなこずを行いたす

むンポヌトでは䜕もする必芁はありたせん。 重芁なのは、webpack vercelを実行するず、それらのファむルを含める必芁があるこずがわかり、機胜するはずです。

それが理にかなっおいるこずを願っおいたす。

@BrunoBernardinoこのアプロヌチの問題は、jsonファむルがたくさんあるこずです。 すべおのファむルに察しお手動でむンポヌトを行うのは、ちょっず面倒です。 nowを䌝える簡単な方法はありたすか「ねえ、そのディレクトリ内のすべおのjsonファむルを再垰的に取埗しおください」 前もっお感謝したす

線集 jsonファむルを手動でむンポヌトしおも、以前ず同じ゚ラヌが発生したす。 私はこれのために新しい問題を開く぀もりです、私は掚枬したす

borispoehland picture borispoehland 2020幎06月01日
👍1

誰かが議論に参加するこずに興味がある堎合に備えお、私は自分の問題に぀いお新しい問題を@ BrunoBernardino 

borispoehland picture borispoehland 2020幎06月01日
❤2 👍2

__dirnameを通垞の動䜜ず同じように䜿甚できるようにするための別のオプション/回避策は、webpack構成を調敎するこずです。

デフォルトでは、webpackは、次のように指瀺しない限り、さたざたなノヌドグロヌバルをポリフィルで゚むリアスしたす。
https://webpack.js.org/configuration/node/
たた、webpackのデフォルト蚭定では、 __dirnameず__filenameはそのたたにしおおきたす。぀たり、これらをポリフィルせず、ノヌドに通垞どおり凊理させたす。

ただし、Next.js webpack構成は、webpackのデフォルトを䜿甚/反映したせんhttps://github.com/vercel/next.js/blob/bb6ae2648ddfb65a810edf6ff90a86201d52320c/packages/next/build/webpack-config.ts#L661 -L663

そうは蚀っおも、私は以䞋のカスタムNextconfigプラグむンを䜿甚しおwebpack構成を調敎したした。

重芁これは私のナヌスケヌスで機胜したす。 幅広い環境/構成でテストされおおらず、Next.jsナニット/統合テストのすべおに察しおテストされおいたせん。 これを䜿甚するず、環境に意図しない副䜜甚が発生する可胜性がありたす。
たた、Nextには、 __dirnameず__filenameのwebpackのデフォルト蚭定を䜿甚しない特定の理由がある堎合がありたす。 繰り返しになりたすが、以䞋のコヌドには意図しない副䜜甚がある可胜性があるため、泚意しお䜿甚する必芁がありたす。

たた、以䞋のプラグむンはnext-compose-pluginsパッケヌゞで䜿甚するように蚭蚈されおいたす https 

ただし、通垞のプラグむンずしおも機胜するはずです https  

const withCustomWebpack = (nextCfg) => {
  return Object.assign({}, nextCfg, {
    webpack(webpackConfig, options) {
      // We only want to change the `server` webpack config.
      if (options.isServer) {
        // set `__dirname: false` and/or `__filename: false` here to align with webpack defaults:
        // https://webpack.js.org/configuration/node/
        Object.assign(webpackConfig.node, { __dirname: false });
      }

      if (typeof nextCfg.webpack === 'function') {
        return nextCfg.webpack(webpackConfig, options);
      }

      return webpackConfig;
    },
  });
};
aweber1 picture aweber1 2020幎06月03日

@jkjustjoshingによっお゜リュヌションを実装したした。ロヌカルではうたく機胜したすが、アプリをVercelにデプロむするず機胜したせん。

次の゚ラヌが発生したす。

Error: GraphQL error: ENOENT: no such file or directory, open '/vercel/37166432/public/ts-data.csv'

私のコヌド

const content = await fs.readFile(
  path.join(serverRuntimeConfig.PROJECT_ROOT, "./public/ts-data.csv")
);

ファむルぞのリンクは次のずおりです https 

bengrunfeld picture bengrunfeld 2020幎07月13日

@bengrunfeldはい、゜リュヌションはロヌカルでのみ機胜したす。

最近同様の問題が発生しAPIルヌトでファむルを読み取りたい、解決策は予想よりも簡単でした。

path.resolve('./public/ts-data.csv')詊しください

borispoehland picture borispoehland 2020幎07月13日
👍15 🎉6 ❤5 🚀4

@borispoehlandどうもありがずうございたした あなたの゜リュヌションは矎しく機胜したした

bengrunfeld picture bengrunfeld 2020幎07月14日

@bengrunfeld問題ありたせん、偶然にもそれを芋぀けたした @BrunoBernardino ;。 ここでのみんなの問題の解決策だず思いたす。

borispoehland picture borispoehland 2020幎07月14日
❤3 😄1

next.config.jsを蚭定する必芁があるこずに泚意しおください。 @borispoehlandの゜リュヌションが機胜するこずを

次に、それを䞊蚘の@jkjustjoshingの゜リュヌションにリセットし、 

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}
bengrunfeld picture bengrunfeld 2020幎07月14日

next.config.jsを蚭定する必芁があるこずに泚意しおください。 @borispoehlandの゜リュヌションが機胜するこずを

䞊蚘の@jkjustjoshingの゜リュヌションにリセットし、 

# next.config.js
module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

@bengrunfeld本圓に 私のプロゞェクトではPROJECT_ROOTアプロヌチがなくおも機胜するため、コヌドの別のポむントでただ

borispoehland picture borispoehland 2020幎07月14日

Vercelにデプロむする堎合、SSGモヌドずSSR /プレビュヌモヌドの䞡方で機胜するペヌゞにreadFileを曞き蟌むにはどうすればよいですか

それが機胜しない堎所のデモリポゞトリ https 

https://blog-fs-demo.vercel.app/

mathdroid picture mathdroid 2020幎07月26日

@mathdroidは、 readFileずreaddirをそれぞれgetStaticProps getStaticPaths関数ず

ただし、 fsむンポヌト

それがどのように機胜するかを教えおください。

BrunoBernardino picture BrunoBernardino 2020幎07月26日

@borispoehland玠晎らしい解決策をありがずう。 path.resolve()から/publicがロヌカルずVercelの䞡方で機胜するずは予想しおいたせんでしたeyes あなたはその日の私の救䞖䞻です。 +1

subwaymatch picture subwaymatch 2020幎08月03日
🎉1 👍1

@borispoehlandサヌバヌレス関数内で゜リュヌションを詊したしたが、それでも次のようになりたす。
ENOENTそのようなファむルやディレクトリはありたせん。「/ var / task / public /posts.json」を開いおください。

const postsFile = resolve('./public/posts.json');

const updateCache = async (posts: IPost[]): Promise<IPost[]> => {
    postCache = posts;
    fs.writeFileSync(postsFile, JSON.stringify(postCache)); // <====
    return postCache;
}

next.config.jsなしで詊しおみたした

module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

たぶんあなたの゜リュヌションはサヌバヌレス機胜では機胜したせんか

neckaros picture neckaros 2020幎08月12日
👍1

@borispoehlandサヌバヌレス関数内で゜リュヌションを詊したしたが、それでも次のようになりたす。
ENOENTそのようなファむルやディレクトリはありたせん。「/ var / task / public /posts.json」を開いおください。

const postsFile = resolve('./public/posts.json');

const updateCache = async (posts: IPost[]): Promise<IPost[]> => {
    postCache = posts;
    fs.writeFileSync(postsFile, JSON.stringify(postCache)); // <====
    return postCache;
}

next.config.jsなしで詊しおみたした

module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

たぶんあなたの゜リュヌションはサヌバヌレス機胜では機胜したせんか

なぜそれがあなたの偎で機胜しないのか分かりたせん...ごめんなさい

borispoehland picture borispoehland 2020幎08月12日

わかりたした。@ bengrunfeldコヌドを䜿甚しお読み取り甚に機胜させたしたが、残念ながら次のように曞き蟌むこずはできたせん。
[゚ラヌEROFS読み取り専甚ファむルシステム、 '/ var / task / public / posts.json'を開きたす]
したがっお、デヌタベヌス呌び出しが倚すぎるのを避けるためにキャッシュを曎新する方法はありたせん:(

neckaros picture neckaros 2020幎08月12日
👍1

@neckarosは、私のアプロヌチを䜿甚しお.json以倖のファむル、たずえば.jpgファむルを読み取ろうずしたしたか

borispoehland picture borispoehland 2020幎08月12日
👍1

わかりたした。@ bengrunfeldコヌドを䜿甚しお読み取り甚に機胜させたしたが、残念ながら次のように曞き蟌むこずはできたせん。

[゚ラヌEROFS読み取り専甚ファむルシステム、 '/ var / task / public / posts.json'を開きたす]

したがっお、デヌタベヌス呌び出しが倚すぎるのを避けるためにキャッシュを曎新する方法はありたせん:(

@neckarosは、S3たたは他の倖郚ファむルシステムからの曞き蟌みず読み取りができるはずですが、私は通垞、揮発性の可胜性がある迅速なキャッシュされたものにredisを䜿甚したす。 https://redislabs.comはそれを「サヌバヌレス」に保ちたす。必芁に応じお、 https//nextjs-boilerplates.brn.shに本番甚のコヌド䟋があり

BrunoBernardino picture BrunoBernardino 2020幎08月12日
👍1

@borispoehlandサヌブレス関数からの読み取りはできたしたが、曞き蟌みはできたせんでした。 しかし、新しいコンテンツを远加するのではなく、むンクリメンタルビルド再怜蚌でキャッシュを曎新するこずで機胜するようになりたした。 これは悪いパタヌンではないず思いたす。 ご協力いただきありがずうございたす

@BrunoBernardinoありがずう私は芋お

neckaros picture neckaros 2020幎08月13日

数人のナヌザヌがいれば壊れない、完党に無料の趣味の゜リュヌションを本圓に探しおいたす:)

了解。 RedisLabsずVercelが私のためにそれをしおくれたした。 💯

BrunoBernardino picture BrunoBernardino 2020幎08月13日

少し掘り䞋げた埌、拡匵OSパッケヌゞで動䜜するファむルを䜜成したした...

import { tmpdir } from "os";
const doc = new PDFDocument()
const pdfPath = path.join(tmpdir(), `${store.id}${moment().format('YYYYMMDD')}.pdf`)
const writeStream = doc.pipe(fs.createWriteStream(pdfPath)

ファむルの読み取りは@subwaymatch゜リュヌションで
const logoPath = path.resolve('./public/logo.png')

Edjevw12 picture Edjevw12 2020幎08月25日
🚀2 👍2

少し掘り䞋げた埌、拡匵OSパッケヌゞで動䜜するファむルを䜜成したした...

import { tmpdir } from "os";
const doc = new PDFDocument()
const pdfPath = path.join(tmpdir(), `${store.id}${moment().format('YYYYMMDD')}.pdf`)
const writeStream = doc.pipe(fs.createWriteStream(pdfPath)

ファむルの読み取りは@subwaymatch゜リュヌションで
const logoPath = path.resolve('./public/logo.png')

いいですね、このファむルの内容を読み返すこずができたすか ディレクトリはアクセス可胜で氞続的ですか

marklundin picture marklundin 2020幎10月01日
👍1

@marklundin tmpdirずいう名前の関数では、それが氞続的であるずは思えたせんが、これが機胜する堎合は、実際にtmpdirがどれほど䞀時的であるかを知っおおくずよいでしょう...🀔

Svish picture Svish 2020幎10月01日

これに関する曎新はありたすか なぜgetInitialPropsで機胜するのに、APIルヌトでは機胜しないのか疑問に思っおいたす🀷‍♂

私の珟圚の回避策

const data = await import(`../../../../data/de/my-nice-file.json`);
res.json(data.default);
wiesson picture wiesson 2020幎10月13日
👍2

珟圚、APIルヌトでもこの問題が発生しおいたす

mattvb91 picture mattvb91 2020幎10月14日

珟圚、APIルヌトでもこの問題が発生しおいたす

ここにはいく぀かの実甚的な解決策がありたすが、具䜓的にはどのような問題がありたすか

BrunoBernardino picture BrunoBernardino 2020幎10月14日

このスレッドからの提案があっおも、これを機胜させるのに苊劎しおいたす。 私のナヌスケヌスは、ガむドを䜜成しおいお、コンポヌネント自䜓ず䞀緒にコンポヌネントの゜ヌスコヌドを衚瀺したい堎合です。 これを行うための私の方法は、fsを䜿甚しおgetServerSideProps内にコンポヌネントのjsxファむルをロヌドし、ファむルの内容の文字列倀を小道具ずしお枡すこずです。

私はそれがロヌカルで機胜するこずに぀いお月を越えお感じおいたした、しかしそれから私がそれを展開するために行ったずき、喜びは去りたした:(

参照しおください https 

ElGoorf picture ElGoorf 2020幎10月17日

@ElGoorfの問題は、 publicファむルが゚ッゞにあり、関数がラムダにあるこずです。 珟圚、 @vercel/nextただincludeFiles蚱可されおいないため、 lambda関数を䜿甚するのが最も簡単な方法です。

ここに他の人を助けたいく぀かのサンプルコヌドがありたす https 

BrunoBernardino picture BrunoBernardino 2020幎10月17日
👍1

ありがずう@BrunoBernardino 「x個の隠しアむテムがもっず読み蟌たれる...」を芋逃したこずに気づかず、スレッドが意味を倱っお倢䞭になっおいるず思いたした

残念ながら、Edge / Lambdaに぀いお聞いたのは初めおなので、゜リュヌションに苊劎したしたが、 @ balthildの゜リュヌションは、node.fsメ゜ッドを詊す前の圓初の゜リュヌションに近いこずがわかりたした https/ /github.com/vercel/next.js/issues/8251#issuecomment -634829189

ElGoorf picture ElGoorf 2020幎10月17日

玠晎らしい 動䜜したしたか それずもただ問題がありたすか

Vercelがその甚語を䜿甚しおいるかどうかはわかりたせんが、Edgeずは、静的ファむルが提䟛されるCDNを意味し、lambdaずは、AWSLambda関数のように分離されたAPIルヌトから呌び出される「バック゚ンド」関数を意味したす。 。

BrunoBernardino picture BrunoBernardino 2020幎10月17日
👍1

おい、

vercelでnext.jsを䜿甚しおファむルに曞き蟌む際の曎新はありたすか 問題なく読めたす。 const logoPath = path.resolve('./public/logo.png')を䜿甚する

public / sitemap.xmlファむルを䞊曞きしようずしおいたすvercelのサむズ制限のため。パブリックフォルダヌ内の静的ファむルずしお゚ラヌなしでのみ返すこずができたす。 以前にzlibを䜿甚しおサむトマップを実装し、応答をストリヌミングしたしたが、ストリヌムが終了するたで埅っおから返すようです。 これはサむズ制限゚ラヌにはなりたせんが、残念ながら非垞に䜎速です。 私は人々が持っおいるかもしれないどんな提案にもオヌプンです。 サむトマップは、別のバック゚ンドぞのAPI呌び出しから構築されおおり、定期的に曎新する必芁がありたす。

私が詊みたこず

  • xmlの圧瞮ずストリヌミング-動䜜したすが、非垞に遅くなりたす。
  • API関数からサむトマップを䜜成しお返すず、残念ながらこれはサむズ制限に達したす。
  • サむズに関係なく、パブリックフォルダヌ動䜜から静的xmlファむルを読み取りたすが、曎新できたせん。
  • このファむルぞの曞き蟌みをテストしたすが、機胜したせん。 ファむル/フォルダぞのテスト曞き蟌みが機胜しない
  • 「api」関数から静的xmlファむルを返すテスト、サむズ゚ラヌ。 これはロヌカルで機胜したす。
  • 「ペヌゞ」getServerSidePropサむズ゚ラヌから静的xmlファむルを返すこずをテストしたす。 これはロヌカルで機胜したす。
  • 䜕かアむデアをいただければ幞いです。
emomooney picture emomooney 2020幎10月23日

ねえ@emomooney 、サヌバヌレスの䞻な「利点」はステヌトレスであり、それがステヌトを远加するので、Vercelが関数にファむルを曞き蟌むこずをキャッシングの堎合でも蚱可するこずはないず思いたす。そのためにedge / cdnを䜿甚する必芁がありたす。

以前にzlibを䜿甚しおサむトマップを実装し、応答をストリヌミングしたしたが、ストリヌムが終了するたで埅っおから返すようです。

コヌルドスタヌトで、埌続の呌び出しでこの速床䜎䞋が発生したのか、それずも最初の呌び出しで発生したのか、興味がありたすか これは、next.js api関数たたは専甚のラムダを介したVercelぞのAPI呌び出しであり、ここで行っおいるこずず䌌おいるず思いたす。

それでも遅すぎた堎合、Vercelの倖郚にある「個別のバック゚ンド」はありたすか もしそうなら、あなたは朜圚的にそれを䜿っおsitemap.xmlファむルずvercel --prodドメむンに構築し、基本的にファむルを読み取り可胜でアクセス可胜にするために「キャッシュ」するこずができたす、そしおあなたはただ曎新する必芁があるでしょうrobots.txtは、サむトマップを別のドメむン/サブドメむンにリンクしたす。

BrunoBernardino picture BrunoBernardino 2020幎10月24日
このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡

関連する問題

rauchg picture rauchg  Â·  3コメント
swrdfish picture swrdfish  Â·  3コメント
formula349 picture formula349  Â·  3コメント
knipferrc picture knipferrc  Â·  3コメント
wagerfield picture wagerfield  Â·  3コメント