בדף התיעוד של דינו יש רשימה של Web Frameworks שדינו תומך בהם ואני מודה שהפריט הראשון ברשימה בלבל אותי. כלומר שמעתי את אנשי דינו מדברים על תמיכה ב next.js אבל לא הבנתי שהכל כבר מוכן, ואם זה מוכן לא ברור למה האנשים ב vercel לא נותנים יותר פירסום לסיפור. אני מפרסם פה כמה ניסויים שעשיתי עם השילוב, לצערי בלי מסקנות מלהיבות.

1. איך לפתוח פרויקט next.js חדש עם דינו

הדבר הראשון שעובד עם הגירסה החדשה של דינו מותקנת הוא יצירת פרויקט next חדש. פשוט מפעילים:

deno run -A npm:create-next-app@latest my-next-app

באופן לא טיפוסי ל deno, הפקודה מייצרת תיקיית node_modules ושמה בה את כל הסקריפטים של next ואת כל התלויות שלהם. אפשר להפעיל את הפרויקט עם דינו במצב פיתוח וגם זה עובד:

deno task dev

והוא הצליח להגיש את הפרויקט כשנכנסתי עם הדפדפן ל localhost:3000.

2. איך לוודא שאנחנו ב Deno

למרות שהפעלתי את הפרויקט מדינו עדיין לא הייתי רגוע - למה צריך שם תיקיית node.js ואיך הסקריפטים של next עובדים עם קוד דינו. אז עדכנתי את הנתיב הראשי והוספתי לו קוד שקורא קובץ תוך שימוש ב API ספציפי של דינו:

export default async function Home() {
  const serverRenderedValue = await Deno.readFile('./value.txt');
  const decoded = new TextDecoder().decode(serverRenderedValue);

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <p>Text in file is: {decoded}</p>
    </div>
  );
}

למרבה ההפתעה זה גם עבד והצלחתי לראות את התוכן של הקובץ בקומפוננטה על המסך. הכל עובד יפה עם ה Server Components של next.

3. איפה הבעיה

האתגר הבא היה לחשוב על Deployment ופה הגעתי לסוף המסלול בניסוי היום. הפעלה של deno task build כדי לבנות את הפרויקט החזירה:

Task build next build
  ▲ Next.js 14.2.13

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ..Cannot read properties of undefined (reading 'bold')

זה היה עם הגירסה החדשה ביותר של דינו (ה RC לגירסה 2). בעיקרון אפשר היה להפעיל npm run build כדי לבנות בעזרת node אבל זה לא יעבוד כי השתמשתי ב API ספציפי לדינו כדי לקרוא קובץ:

> my-next-app@0.1.0 build
> next build

  ▲ Next.js 14.2.13

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./src/app/page.tsx:6:37
Type error: Cannot find name 'Deno'.

  4 |
  5 | export default async function Home() {
> 6 |   const serverRenderedValue = await Deno.readFile('./value.txt');
    |                                     ^
  7 |   const decoded = new TextDecoder().decode(serverRenderedValue);
  8 |
  9 |   return (

פקודת build נחוצה כדי שאפשר יהיה להפעיל start ו deploy ולעבור לסביבת פרודקשן.

אין ספק שדינו מתקדם בכיוון הנכון מבחינת תאימות אבל אני חייב להודות שאני עדיין לא רגוע. לפחות בהיבט של next.js, קשה לראות איך הם יצליחו לבנות תאימות בלי עזרה של החברים ב vercel, ושם נראה שמעדיפים להתמקד ב node. אז כן אפשר לבנות פרויקט next ב deno ולרוץ מקומית במצב פיתוח, ואם הקפדתם להשתמש רק ב APIs שקיימים ב node תוכלו גם בעתיד לבנות אותו לפרודקשן ב node, אבל במצב כזה לא ברור למה שנרצה לבצע את כל הפיתוח ב deno.