Next.js Discord

Discord Forum

Pyscript with nextjs

Answered
In&Out posted this in #help-forum
Open in Discord
Avatar
In&OutOP
Hey, is it possible to use pyscript with nextjs?
Answered by In&Out
import { useEffect, useState } from "react";

export default function Home() {
  const [hydrated, setHydrated] = useState(false);
  useEffect(() => {
    setHydrated(true);
  }, []);
  if (!hydrated) {
    // Returns null on first render, so the client and server match
    return null;
  }
  return (
    <div>
      test
      <py-script>
        for i in range(9):{"\n"} print(i){"\n"}
        {"\n"}
        def func():{"\n"} print('function works'){"\n"}
      </py-script>
    </div>
  );
}
View full answer

38 Replies

Avatar
Eric Burel
What did you try, what did work/didn't work
it's supposed to work in the broswser, so it probably works, but you'll have to explore how
Avatar
In&OutOP
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Script from "next/script";
import { NextScript } from "next/document";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
      <Script
        defer
        src="https://pyscript.net/latest/pyscript.js"
        strategy="beforeInteractive"
      />
      <body className={inter.className}>
        {children}
        <NextScript />
      </body>
    </html>
  );
}
a dumb try ngl lol
Avatar
Eric Burel
cool, did you try to run some Python with that ?
Avatar
In&OutOP
Image
Avatar
Eric Burel
semmes to be blending Pages and App Router, can you try on a freshly created Next.js app maybe ?
Avatar
In&OutOP
i did
Avatar
Eric Burel
are you sure the issue is related with PyScript?
Avatar
In&OutOP
let me remove it
yup, it is
Avatar
Eric Burel
what's NextScript from "next/document" ?
Avatar
In&OutOP
works without it
idk i was just following this https://fabiorosado.dev/blog/running-pyscript-in-react/
Avatar
Eric Burel
this tutorial is for the pages router you should try with the pages router rather than the app router then
Avatar
In&OutOP
ah alr, how to get pages folder in next 14?
Avatar
Eric Burel
mkdir pages
rm app
it its retrocompatible
Avatar
In&OutOP
oh just that?
alr will do
Avatar
Eric Burel
yep pages router is still working fine and will for a long while
Avatar
In&OutOP
Image
like this?
will just reinstall
Avatar
In&OutOP
did it, tho it doesnt work
export default function Home() {
  return (
    <div>
      test
      <py-script>
        for i in range(9): print(i) def func(): print('function works')
      </py-script>
    </div>
  );
}
Image
Property 'py-script' does not exist on type 'JSX.IntrinsicElements'.
do i need to downgrade nextjs or somethig
Avatar
In&OutOP
oh crap, it works
Avatar
In&OutOP
import { useEffect, useState } from "react";

export default function Home() {
  const [hydrated, setHydrated] = useState(false);
  useEffect(() => {
    setHydrated(true);
  }, []);
  if (!hydrated) {
    // Returns null on first render, so the client and server match
    return null;
  }
  return (
    <div>
      test
      <py-script>
        for i in range(9):{"\n"} print(i){"\n"}
        {"\n"}
        def func():{"\n"} print('function works'){"\n"}
      </py-script>
    </div>
  );
}
Answer
Avatar
In&OutOP
This works
Image
somehow, lol but it works
Avatar
Eric Burel
yeah I was expecting something like that you need client-only components
See https://medium.com/@eric.burel/how-to-get-rid-of-window-is-not-defined-and-hydration-mismatch-errors-in-next-js-567cc51b4a17 for more details
Avatar
In&OutOP
okay thanks