Soft.xyz is an independent, data-driven platform that compares 232+ developer tools across 69 categories by real metrics — GitHub activity, npm downloads, actual pricing, DX scores, and community sentiment. Unlike pay-to-play review sites, every ranking on Soft.xyz is based on publicly verifiable data pulled from GitHub, npm, and official pricing pages.

How does Soft.xyz collect data?

Soft.xyz pulls data from public APIs including GitHub (stars, forks, commits, open issues, last commit date), npm (weekly download counts), and official pricing pages. Community sentiment data comes from Reddit and Hacker News mention tracking. All metrics are refreshed weekly and timestamped so you can see exactly when data was last updated.

Is Soft.xyz free to use?

Yes, Soft.xyz is completely free to use. All tool pages, comparisons, benchmarks, DX scores, pricing analysis, and category rankings are available at no cost. For teams that need a deeper analysis, we offer a paid Stack Audit report ($199) that evaluates your entire tech stack with personalized recommendations. An API is also available for programmatic access to our dataset.

How many tools does Soft.xyz track?

Soft.xyz tracks 232 developer tools across 69 categories including databases, hosting, authentication, payments, analytics, CI/CD, monitoring, search, CMS, and more. Each tool page includes real-time GitHub metrics, npm download counts, pricing breakdowns, and side-by-side comparisons with alternatives in the same category.

Home / Migrations / Create React App → Next.js

Create React App → Next.js

medium

CRA is dead. Next.js gives you SSR, SSG, API routes, and a production-ready setup. Most effort is restructuring routing and deciding Pages vs App Router.

Estimated: 4-10h · 7 steps

Progress0%

Step 1: Install Next.js

npx create-next-app@latest my-app --typescript && npm uninstall react-scripts

Step 2: Migrate file structure

Move src/components, src/hooks, src/utils as-is. Create app/ (or pages/) directory. Each route = a file.

Step 3: Port routing

React Router routes → Next.js file-based routes. <Link> from next/link. useNavigate → useRouter from next/navigation.

Step 4: Replace env vars

REACT_APP_ → NEXT_PUBLIC_ for client-side vars. Server-only vars have no prefix.

find src -name '*.ts*' -exec sed -i 's/process.env.REACT_APP_/process.env.NEXT_PUBLIC_/g' {} +

Step 5: Move index.html content

Put <head> content in app/layout.tsx using Next.js Metadata API. Global CSS in app/globals.css.

Step 6: Set up API routes

Move any CRA proxied endpoints to app/api/route.ts. Replace fetch('/api/x') with same — routing matches automatically.

Step 7: Test build

npm run build && npm run start

✓ All pages render, no missing env vars, API routes respond