JefCurtis

Integrations Pages Migration Plan: Next.js → Astro

Status

• ✅ Phase 1: Data Infrastructure & Home Page - Complete
• ⏳ Phase 2: Category & Search Pages - In Progress
• ⏳ Phase 3: Detail & Collection Pages - Not Started

---

JefCurtis

Karma Page Migration Plan: Next.js → Astro

Context

The karma page currently exists in the Next.js todoist-landing-pages app and needs to be migrated to the Astro todoist-astro app. This migration is part of the broader effort to consolidate all marketing pages into the Astro codebase for better performance, simpler deployment, and improved developer experience.

The karma page showcases Todoist's productivity tracking feature with:

• Dynamic OG images based on karma level (1-7) and streak days (7, 30, 60, 100)
• Localized content across 19 languages
• Product UI integration for scene images

JefCurtis

[David M](twist-mention://4028) and I, are spearheading the migrating of our marketing landing pages from Next.js to Astro! 🎯

This continues the successful experimentation we've been doing with Astro (Help Center and pairing sessions) and we're now ready to tackle the full landing pages migration.

**Why Astro?**

Our current Next.js setup has significant pain points: slow page loads, large client bundles, and poor performance, especially on slower connections and mobile devices. We're hitting Next.js limitations that block us from achieving our performance goals, and the framework just seems to be heading in the wrong direction for what we need it for.

Astro solves these problems with near-zero JavaScript by default and static generation. Plus, we keep our existing Atomic React components—no full rewrite needed.

JefCurtis

config/dev/

JefCurtis

{
  "scripts": {
    "build:prod": "DEPLOY_ENV=prod webpack --config config/webpack/webpack.config.js",
    "build": "DEPLOY_ENV=dev webpack --watch --config config/webpack/webpack.config.js",    
    "sync": "cd build/ && clasp push"
  }
},

JefCurtis

const { env } = require("process");
const deployEnv = env.DEPLOY_ENV || "dev";

[...]
module.exports = {
 [...]
  plugins: [
    new CopyWebpackPlugin([
      { from: join(root, `config/${deployEnv}/.clasp.json`), to: ".", ToType: "file" },
    ]),

JefCurtis

{
  "scripts": {
    "sync": "DEPLOY_ENV=dev webpack --watch --config config/webpack/webpack.config.js",
    "push": "cd build/ && clasp push"
  }
}

JefCurtis

const exec = require("child_process").exec;
[...]
module.exports = {
 [...]
  plugins: [
    [...]
    new CopyWebpackPlugin([
      { from: join(root, "config/dev/.clasp.json"), to: ".", ToType: "file" },
    ]),
    {

JefCurtis

{
  "scriptId":"10r3UYeLI…"
}

JefCurtis

const HtmlWebpackPlugin = require("html-webpack-plugin");

[...]
 module.exports = {
 [...]
  plugins: [
    new HtmlWebpackPlugin({
      filename: "appsscript.json",
      template: join(root, "config", "appsscript.json.ejs"),
      chunks: [],