TBD.
In the generative AI era, thanks to large language models like GPT, Claude, and Deepseek, along with development tools like Cursor and Trae, the barrier to building an app has been significantly lowered, whether you're using LLMs while writing code or integrating them into your app. The web is an excellent distribution channel for apps, allowing users worldwide to access your product within minutes. Therefore, understanding how to elegantly develop and deploy a web app, while maintaining minimal cognitive load and following best practices, has become increasingly important.
But truly, even today, there are independent developers who don't know about Vercel and Railway, who are still deploying on services like EC2. There are people who haven't adopted Tailwind + shadcn/ui for writing more fluid and highly flexible component libraries. Many beginners don't understand what backend is, haven't discovered or tried frameworks like FastAPI, and assume backend development is extremely complex and difficult.
But clearly, this isn't the case - it's just an information gap. Therefore, I want to write a brief article to provide some reference for beginners.
Path Selection and Introduction
Among countless combinations, here's my recommendation:
- Web Development: Next.js
- Web Deployment: Vercel
- Backend Development: FastAPI
- Backend Deployment: Railway
First, a brief introduction: Next.js is currently one of the most mainstream frontend frameworks. ChatGPT and many AI web apps are developed using Next.js. It provides a highly integrated development framework and corresponding ecosystem, offering a complete web service out of the box, with built-in server-side rendering, SEO (Search Engine Optimization), routing system, and more. Behind Next.js is React.js. Using frontend UI engines like React and Vue has the advantage of greatly simplifying web UI development patterns and providing a rich ecosystem.
After setting up your Next.js web project, Vercel can handle everything else with just a few clicks. It automatically updates through git repositories, manages domains, CDN, SSL certificates, load balancing, logging, etc., and deploys your website to servers worldwide, making it globally accessible and always online.
Like frontend, backend is also a field where different tools suit different needs. Next.js includes a built-in API server that integrates well with server-side rendering. I have many projects that directly use Next.js backend, but the Next.js backend can be somewhat confusing for beginners who don't understand the principles. Therefore, I recommend starting with FastAPI from Python for backend development. This is also a very well-designed library and my favorite among countless backend libraries I've learned across different languages. FastAPI can help beginners quickly understand the basic principles of backend development in the most concise way.
Backend deployment is equally challenging. Traditional solutions like renting servers for operations or using cloud functions require spending significant time and energy outside of developing core business logic. Railway is the Vercel of the backend world, providing an equally simple and user-friendly deployment method with continuous integration/continuous deployment, deploying backends globally.
Tutorial
Here are the steps and detailed explanations.
Frontend Section
- Install Node.js / npm
- Install yarn / pnpm / bun
- Create Next.js project
- Upload Next.js project to GitHub
- Deploy Next.js project on Vercel
Backend Section
- Install Python / uv
- Create project and install FastAPI
- Test API using browser and Apifox
- Upload FastAPI project to GitHub
- Deploy FastAPI project on Railway
- Use and render backend data in Next.js
Frontend Section
1. Install Node.js / npm
Node.js is the JavaScript runtime for frontend development, and npm is Node.js's package management tool. They are essential tools for frontend development.
2. Install yarn / pnpm / bun
Due to npm's slow dependency installation speed and poor progress display, three alternatives have emerged in the market: yarn / pnpm / bun. They may offer better performance and local caching for dependency installation. More and more people are choosing these third-party package management tools. Below, we'll use pnpm as an example.
3. Create Next.js project
First, use Next.js's official scaffolding to create a project.
npx create-next-app@latest
Since the project uses npm as the package manager, we need to delete the package-lock.json file and then install dependencies using pnpm.
pnpm install
After installation, start the project using the following command.
pnpm dev
4. Upload Next.js project to GitHub
First, if you don't have a GitHub account, register one at GitHub's website, and download GitHub Desktop to manage project synchronization.
After logging into your GitHub account in GitHub Desktop, click File -> New Repository to create a new repository, select the Next.js project you just created, then click Publish repository to publish the project.
5. Deploy Next.js project on Vercel
First, register an account on Vercel's website, then click New Project to create a new project, select Import Git Repository, choose the GitHub repository you just created, and click Import to import the project.
After importing the project, Vercel will start packaging the frontend project. Once packaging is complete, Vercel will automatically assign you a domain name. You can modify the domain in Settings -> Domains. You can specify any unused .vercel.app domain.
Backend Section
1. Install Python / uv
We'll use Python + FastAPI to write the backend, and uv is a new high-performance Python package manager that can even help us download and manage Python versions, so we'll use uv to install Python.
2. Create project and install FastAPI
Follow the installation guide on the FastAPI official website.
3. Test API using browser and Apifox
After starting FastAPI, open http://localhost:3000 in your browser to see the Hello, World! that appeared in the Python file. This is because when a browser accesses a domain, it essentially sends a GET request to that domain. FastAPI receives the request and returns a JSON object, which the browser then renders as Hello, World!.
To debug RESTFUL requests other than GET requests, we can use Apifox to test the APIs written in FastAPI.
You can also set up automatic import of FastAPI's /openapi.json in Apifox, saving the step of manually creating interfaces.
4. Upload FastAPI project to GitHub
Similarly, upload the FastAPI project to GitHub to connect with Railway for deployment.
5. Deploy FastAPI project on Railway
Railway provides a Python + FastAPI template that can be deployed with one click, but since we're using uv and custom ports, we'll need to modify the code to ensure Railway can correctly deploy and run our backend code.
6. Use and render backend data in Next.js
With both local and online deployed backends, we can try calling backend APIs in Next.js for server-side data rendering.
For client-side data rendering, you can use swc for development.