[
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n# python\n__pycache__/\nvenv"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2023 Diego Valdez\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\">\n  <a href=\"https://nextjs-fastapi-starter.vercel.app/\">\n    <img src=\"https://assets.vercel.com/image/upload/v1588805858/repositories/vercel/logo.png\" height=\"96\">\n    <h3 align=\"center\">Next.js FastAPI Starter</h3>\n  </a>\n</p>\n\n<p align=\"center\">Simple Next.j 14 boilerplate that uses <a href=\"https://fastapi.tiangolo.com/\">FastAPI</a> as the API backend.</p>\n\n<br/>\n\n## Introduction\n\nThis is a hybrid Next.js 14 + Python template. One great use case of this is to write Next.js apps that use Python AI libraries on the backend, while still having the benefits of Next.js Route Handlers and Server Side Rendering.\n\n## How It Works\n\nThe Python/FastAPI server is mapped into to Next.js app under `/api/`.\n\nThis is implemented using [`next.config.js` rewrites](https://github.com/digitros/nextjs-fastapi/blob/main/next.config.js) to map any request to `/api/py/:path*` to the FastAPI API, which is hosted in the `/api` folder.\n\nAlso, the app/api routes are available on the same domain, so you can use NextJs Route Handlers and make requests to `/api/...`.\n\nOn localhost, the rewrite will be made to the `127.0.0.1:8000` port, which is where the FastAPI server is running.\n\nIn production, the FastAPI server is hosted as [Python serverless functions](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/python) on Vercel.\n\n## Demo\n\nhttps://nextjs-fastapi-starter.vercel.app/\n\n## Deploy Your Own\n\nYou can clone & deploy it to Vercel with one click:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdigitros%2Fnextjs-fastapi%2Ftree%2Fmain)\n\n## Developing Locally\n\nYou can clone & create this repo with the following command\n\n```bash\nnpx create-next-app nextjs-fastapi --example \"https://github.com/digitros/nextjs-fastapi\"\n```\n\n## Getting Started\n\nFirst, create and activate a virtual environment:\n\n```bash\npython3 -m venv venv\nsource venv/bin/activate\n```\n\nThen, install the dependencies:\n\n```bash\nnpm install\n# or\nyarn\n# or\npnpm install\n```\n\nThen, run the development server(python dependencies will be installed automatically here):\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nThe FastApi server will be running on [http://127.0.0.1:8000](http://127.0.0.1:8000) – feel free to change the port in `package.json` (you'll also need to update it in `next.config.js`).\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n- [FastAPI Documentation](https://fastapi.tiangolo.com/) - learn about FastAPI features and API.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n"
  },
  {
    "path": "api/index.py",
    "content": "from fastapi import FastAPI\n\n### Create FastAPI instance with custom docs and openapi url\napp = FastAPI(docs_url=\"/api/py/docs\", openapi_url=\"/api/py/openapi.json\")\n\n@app.get(\"/api/py/helloFastApi\")\ndef hello_fast_api():\n    return {\"message\": \"Hello from FastAPI\"}"
  },
  {
    "path": "app/api/helloNextJs/route.ts",
    "content": "import { NextResponse } from \"next/server\";\n\nexport async function GET(request: Request) {\n  return NextResponse.json({ message: \"Hello from Next.js 14\" });\n}\n"
  },
  {
    "path": "app/globals.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n  --foreground-rgb: 0, 0, 0;\n  --background-start-rgb: 214, 219, 220;\n  --background-end-rgb: 255, 255, 255;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --foreground-rgb: 255, 255, 255;\n    --background-start-rgb: 0, 0, 0;\n    --background-end-rgb: 0, 0, 0;\n  }\n}\n\nbody {\n  color: rgb(var(--foreground-rgb));\n  background: linear-gradient(\n      to bottom,\n      transparent,\n      rgb(var(--background-end-rgb))\n    )\n    rgb(var(--background-start-rgb));\n}\n"
  },
  {
    "path": "app/layout.tsx",
    "content": "import \"./globals.css\";\nimport { Inter } from \"next/font/google\";\n\nconst inter = Inter({ subsets: [\"latin\"] });\n\nexport const metadata = {\n  title: \"Create Next App\",\n  description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <body className={inter.className}>{children}</body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "app/page.tsx",
    "content": "import Image from \"next/image\";\nimport Link from \"next/link\";\n\nexport default function Home() {\n  return (\n    <main className=\"flex min-h-screen flex-col items-center justify-between p-24\">\n      <div className=\"z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex\">\n        <p className=\"fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30\">\n          Get started by editing FastApi API&nbsp;\n          <Link href=\"/api/py/helloFastApi\">\n            <code className=\"font-mono font-bold\">api/index.py</code>\n          </Link>\n        </p>\n        <p className=\"fixed right-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30\">\n          Get started by editing Next.js API&nbsp;\n          <Link href=\"/api/helloNextJs\">\n            <code className=\"font-mono font-bold\">app/api/helloNextJs</code>\n          </Link>\n        </p>\n        <div className=\"fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none\">\n          <a\n            className=\"pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0\"\n            href=\"https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            By{\" \"}\n            <Image\n              src=\"/vercel.svg\"\n              alt=\"Vercel Logo\"\n              className=\"dark:invert\"\n              width={100}\n              height={24}\n              priority\n            />\n          </a>\n        </div>\n      </div>\n\n      <div className=\"relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]\">\n        <Image\n          className=\"relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert\"\n          src=\"/next.svg\"\n          alt=\"Next.js Logo\"\n          width={180}\n          height={37}\n          priority\n        />\n      </div>\n\n      <div className=\"mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left\">\n        <a\n          href=\"https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n          className=\"group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <h2 className={`mb-3 text-2xl font-semibold`}>\n            Docs{\" \"}\n            <span className=\"inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none\">\n              -&gt;\n            </span>\n          </h2>\n          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>\n            Find in-depth information about Next.js features and API.\n          </p>\n        </a>\n\n        <a\n          href=\"https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app\"\n          className=\"group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <h2 className={`mb-3 text-2xl font-semibold`}>\n            Learn{\" \"}\n            <span className=\"inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none\">\n              -&gt;\n            </span>\n          </h2>\n          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>\n            Learn about Next.js in an interactive course with&nbsp;quizzes!\n          </p>\n        </a>\n\n        <a\n          href=\"https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n          className=\"group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <h2 className={`mb-3 text-2xl font-semibold`}>\n            Templates{\" \"}\n            <span className=\"inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none\">\n              -&gt;\n            </span>\n          </h2>\n          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>\n            Explore the Next.js 13 playground.\n          </p>\n        </a>\n\n        <a\n          href=\"https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app\"\n          className=\"group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <h2 className={`mb-3 text-2xl font-semibold`}>\n            Deploy{\" \"}\n            <span className=\"inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none\">\n              -&gt;\n            </span>\n          </h2>\n          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>\n            Instantly deploy your Next.js site to a shareable URL with Vercel.\n          </p>\n        </a>\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  rewrites: async () => {\n    return [\n      {\n        source: \"/api/py/:path*\",\n        destination:\n          process.env.NODE_ENV === \"development\"\n            ? \"http://127.0.0.1:8000/api/py/:path*\"\n            : \"/api/\",\n      },\n      {\n        source: \"/docs\",\n        destination:\n          process.env.NODE_ENV === \"development\"\n            ? \"http://127.0.0.1:8000/api/py/docs\"\n            : \"/api/py/docs\",\n      },\n      {\n        source: \"/openapi.json\",\n        destination:\n          process.env.NODE_ENV === \"development\"\n            ? \"http://127.0.0.1:8000/api/py/openapi.json\"\n            : \"/api/py/openapi.json\",\n      },\n    ];\n  },\n};\n\nmodule.exports = nextConfig;\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"nextjs-fastapi\",\n  \"version\": \"0.2.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"fastapi-dev\": \"pip3 install -r requirements.txt && python3 -m uvicorn api.index:app --reload\",\n    \"next-dev\": \"next dev\",\n    \"dev\": \"concurrently \\\"npm run next-dev\\\" \\\"npm run fastapi-dev\\\"\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"@types/node\": \"22.5.5\",\n    \"@types/react\": \"18.3.8\",\n    \"@types/react-dom\": \"18.3.0\",\n    \"autoprefixer\": \"10.4.20\",\n    \"concurrently\": \"^9.0.1\",\n    \"eslint\": \"8.41.0\",\n    \"eslint-config-next\": \"13.4.4\",\n    \"next\": \"^14.2.13\",\n    \"postcss\": \"^8.4.47\",\n    \"react\": \"18.3.1\",\n    \"react-dom\": \"18.3.1\",\n    \"tailwindcss\": \"3.4.12\",\n    \"typescript\": \"5.6.2\"\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n}\n"
  },
  {
    "path": "requirements.txt",
    "content": "fastapi==0.115.0\nuvicorn[standard]==0.30.6"
  },
  {
    "path": "tailwind.config.js",
    "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    './pages/**/*.{js,ts,jsx,tsx,mdx}',\n    './components/**/*.{js,ts,jsx,tsx,mdx}',\n    './app/**/*.{js,ts,jsx,tsx,mdx}',\n  ],\n  theme: {\n    extend: {\n      backgroundImage: {\n        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n        'gradient-conic':\n          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',\n      },\n    },\n  },\n  plugins: [],\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  }
]