Adam Hitzger's blog - Tuono: Next.js, but in Rust 🦀

Yep, another React framework. But with a difference that backend is written in Rust, Axum. together they create Tuono!

To install Tuono, use the following command:
In today’s tutorial, we’ll go over how to install Rust and Tuono, how to get oriented within the project, and we’ll try setting up an API endpoint that logs data received from a form. You’ll also need to have the following installed Node.js

To install Rust, run this command!

example.sh

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Pro instalaci Tuona použijte tento příkaz:

example.sh

cargo install tuono
rustup install nightly

If everything is installed, let's move on to creating the project.

example.sh

tuono new example --template with-tailwind
cd example/
npm install
rustup override set nightly
cargo add serde
npm i react-hot-toast

The commands above will create the project and install the necessary npm packages. The --template with-tailwind flag downloads the version of Tuono with Tailwind, using the latest version 4. Next, set the project to use the nightly Rust toolchain and install serde for serialization. For toast notifications, install react-hot-toast. Once everything is installed, start the server!

example.sh

tuono dev

Also, open the project in your IDE so we can play around with it a bit.

Open the tuono.config.ts file and adjust the alias for importing components.

example.typescript

const config: TuonoConfig = {
  vite: {
    alias: {
      '@': 'src',
    },
    plugins: [tailwindcss()],
  },
}

Folder and file structure

In the src folder, you'll find routing, styles, and API endpoints. Just like in Next.js, new routes can be created by making a folder and placing a file named index.tsx inside it. Sometimes, a __layout.tsx file is also needed. Additionally, Tuono introduces a new .rs file — index.rs. This file functions similarly to getServerSideProps in Next.js. It's used to load data from the database and pass it to the frontend.

example.undefined

use serde::Serialize;
use tuono_lib::{Props, Request, Response};

#[derive(Serialize)]
struct MyResponse<'a> {
    subtitle: &'a str,
}

#[tuono_lib::handler]
async fn get_server_side_props(_req: Request) -> Response {
    Response::Props(Props::new(MyResponse {
        subtitle: "The react / rust fullstack framework",
    }))
}

We'll look at more complex data fetching from servers next time. For now, let's create a form that will process and handle our data.

example.html

<form 
      action="/api/formdata" 
      method='POST'
      className='m-10 flex flex-col space-y-2'>
      <h1>Sign Up Form</h1>
      <label htmlFor="name">Name:</label>
      <input 
        name='name' 
        id='name' 
        type="text" 
        placeholder='Enter your name' 
        className='border px-2 w-96 border-black rounded-xl'/>
      <label htmlFor="age">Age:</label>
      <input 
        name='age' 
        id='age' 
        type="number" 
        placeholder='Enter your age' 
        className='border px-2 w-96 border-black rounded-xl'/>
      <label htmlFor="email">Email:</label>
      <input 
        name='email' 
        id='email' type="email" 
        placeholder='Enter your email' 
        className='border px-2 w-96 border-black rounded-xl'/>
      <label htmlFor="password">Password:</label>
      <input 
        name='password' 
        id='password' 
        type="text" 
        placeholder='Enter your name' 
        className='border px-2 w-96 border-black rounded-xl'/>
   <button type='submit'>Submit</button>
    </form>

Next, create an api folder inside the src/routes directory, and within the api folder, create a formdata.rs file, which will serve as our endpoint.

In the formdata.rs file, we'll process the data, print it out, and redirect the user back.

example.text

use tuono_lib::{axum::response::Redirect, Request};
use serde::Deserialize;

#[derive(Deserialize)]
struct FormData {
    name: String,
    age: i8,
    email: String,
    password: String,
}


#[tuono_lib::api(POST)]
async fn send_data(_req: Request) -> Redirect {
    let data = _req.form_data::<FormData>().unwrap();
    let mut message= "/?message=Hello ".to_string();
    println!("Name: {}, Age: {}, Email: {}, Password. {}", data.name, data.age, data.email, data.password);
    message.push_str(&data.name);
    Redirect::to(&message.to_string())
}

First, we'll create the structure of our data, followed by a function to process it. The macro above it indicates that this is not a handler, but a POST-type API route. All functions must accept a Request, which contains methods like params, body, or form_data(). I also created a message variable to return status via search parameters.

In index.tsx, we'll also add a function to handle search parameters.

example.tsx

const path = useRouter()
  useEffect(()=> {
    const msg = path.query?.message;
    console.log(msg)
    if( msg && typeof msg === "string"){
      toast.success(decodeURIComponent(msg))
    }
  }, [path.query])

In __layout.stx, let's also place the Toaster component.

example.tsx

import type { JSX } from 'react'
import { TuonoScripts } from 'tuono'
import type { TuonoLayoutProps } from 'tuono'
import { Toaster } from 'react-hot-toast'
import '../styles/global.css'

export default function RootLayout({
  children,
}: TuonoLayoutProps): JSX.Element {
  return (
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <main>{children}</main>
        <TuonoScripts />
        <Toaster/>
      </body>
    </html>
  )
}

And we are done! Check Tuono official websites.

Folder and file structure

Subscribe to my newsletter !