Movatterモバイル変換

[0]ホーム
URL:

Skip to content
DEV Community
Log in Create account

DEV Community

Brighton Mboya
Brighton Mboya

Posted on

     

Using Turso DB with NextJS

Turso is the new database that allows you to deploy your database easily to the edge. It solves the co-location problem by replicating the database to different regions, and the replicas are always in sync with one primary. Turso is built on top of libSQL, an open-source, open-contribution of SQLite.

We will build a popular tourist destination app showing a list of popular tourist destinations. Check out thelive link, and the source code is availablehere.

Using Turso with NextJS is quite easy, as the way you could use any other database. First things first, we need to install the Turso CLI. You can follow the instructions on installing the CLI from the documentationhere. After that, we will start a new nextJS project. I prefer starting my next app using theCreate-T3-App command, but you can still use the official nextJS installation command. Select TypeScript as the language of choice, and slam Yes when prompted to use Tailwind, coz why not.

npm create t3-app@latest
Enter fullscreen modeExit fullscreen mode

After installing the Turso CLI, we need to login. Turso will open up a new browser window where you will require to grant the Github Turso app some permissions to your account.

turso auth signup
Enter fullscreen modeExit fullscreen mode

After the login process completes, the CLI receives a token that identifies you and stores it in a local file. On macOS, the file is located in$HOME/Library/Application Support/turso. On Linux, it's$HOME/.config/turso. Some things to note about this token:

  • Do not share this token with anyone you don't trust fully; they can use it to work with Turso on your behalf.

  • The token is passed along with all backend API requests made by the CLI while logged in.

  • You can print it using the command.turso auth token.

  • It expires after 7 days. After that, you must log in again with turso auth login.

After the auth part, it is time to create our database and seed some data into it. You can create the database using the turso db create command.

turso db create[DATABASE-NAME]
Enter fullscreen modeExit fullscreen mode

This will create a new database that is located geographically closer to you. Then start interacting with the database via the shell command using this command.

turso db shell[DATABASE-NAME]
Enter fullscreen modeExit fullscreen mode

This will open a SQL shell where you can interact with the database you just created. Paste this command which will create the popular_destinations table, and from there, it will seed the database with some data.

-- create the popular destinations tableCREATETABLEpopular_destinations(idSERIALPRIMARYKEY,countryVARCHAR(255)NOTNULL,nameVARCHAR(255)NOTNULL,locationVARCHAR(255)NOTNULL,image_urlVARCHAR(255)NOTNULL);-- Seeding up the databaseINSERTINTOpopular_destinations(country,name,location,image_url)VALUES('United States','New York City','New York','https://images.unsplash.com/photo-1485871981521-5b1fd3805eee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bmV3JTIweW9ya3xlbnwwfDB8MHx8&auto=format&fit=crop&w=500&q=60');INSERTINTOpopular_destinations(country,name,location,image_url)VALUES('France','Paris','Ile-de-France','https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGFyaXN8ZW58MHwwfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60');INSERTINTOpopular_destinations(country,name,location,image_url)VALUES('Japan','Tokyo','Kanto Region','https://images.unsplash.com/photo-1578469645742-46cae010e5d4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8a3lvdG98ZW58MHwwfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60');INSERTINTOpopular_destinations(country,name,location,image_url)VALUES('Australia','Sydney','New South Wales','https://images.unsplash.com/photo-1526958977630-bc61b30a2009?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');INSERTINTOpopular_destinations(country,name,location,image_url)VALUES('London','UK','United Kingdom','https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bG9uZG9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60');-- Quitting the shell.quit
Enter fullscreen modeExit fullscreen mode

Now we need to get the database URL and the authentication token of the database and configure it on the .env file. At the root of the project, create a .env file and paste these variable names.

url=YOUR_DATABASE_URLauthToken=YOUR_AUTH_TOKEN
Enter fullscreen modeExit fullscreen mode

To get the URL, run this command

turso db show[DATABASE-NAME]--url
Enter fullscreen modeExit fullscreen mode

Then create the authentication token,

turso db show[DATABASE-NAME]--url
Enter fullscreen modeExit fullscreen mode

Lastly, we need to install a package calledlibsql/client which will allow us to interact with the Turso database in our application.

npminstall @libsql/client
Enter fullscreen modeExit fullscreen mode

Now enough of the terminal thing, and let's write some code. Start the dev server by runningnpm run dev and open uplocalhost:3000.

At the src folder, create a folder named db, and create a turso.ts file. Paste this code in the file, this code imports the createClient from libsql/client and configures it so that we can make SQL queries to our database easily.

import{createClient}from"@libsql/client/web";exportdefaultfunctionTurso(){constconfig={url:process.env.url,authToken:process.env.authToken,}returncreateClient(config);}
Enter fullscreen modeExit fullscreen mode

Then create another folder called hooks and create a file calleduseFetch.ts this file will allow us to make queries to our database and will return as a loading and error state as well as the data that we will receive from the database.

import{useEffect,useState}from"react";importaxiosfrom"axios";importtype{QueryResult}from"../pages";exporttypefetchResponse={data:QueryResult[];loading:boolean;error:string;};constuseFetch=(url:string):fetchResponse=>{const[data,setdata]=useState<QueryResult[]>(null);const[loading,setloading]=useState<boolean>(true);const[error,seterror]=useState<string>("");useEffect(()=>{axios.get(url).then((res):void=>{setdata(res.dataasQueryResult[]);setloading(false);}).catch((err:unknown)=>{if(errinstanceofError){seterror(err.message);setloading(false);}});},[url]);return{data,loading,error};};exportdefaultuseFetch;
Enter fullscreen modeExit fullscreen mode

Then add a file in thesrc/api folder calledturso.ts , [pardon my file naming skills]. This file will include a query that queries the popular_destination table and return the data.

importTursofrom'../../db/turso';importtype{NextApiRequest,NextApiResponse}from'next';exportdefaultasyncfunctionHandler(req:NextApiRequest,res:NextApiResponse){try{constclient=Turso();constresponse=awaitclient.execute("SELECT * FROM popular_destinations;");constposts=response.rows.map((post)=>{return{id:post.id,country:post.country,name:post.name,location:post.location,image_url:post.image_url,}})res.status(200).json(posts);}catch(error:unknown){console.log(error);if(errorinstanceofError){res.status(500).json({message:error.message});return;}}}
Enter fullscreen modeExit fullscreen mode

Now finally, on theindex.tsx page. Here we will create a card component and style it with some tailwind. Then we will fetch the data using our useFetch hook and style the results using grid.

import{useState}from"react";importImagefrom"next/image";importuseFetchfrom"../hooks/useFetch";importtype{fetchResponse}from"../hooks/useFetch";exporttypeQueryResult={id:number|null;country:string;name:string;location:string;image_url:string;};functioncn(...classes:string[]){returnclasses.filter(Boolean).join("");}exportdefaultfunctionMyPage(){const[isLoading,setLoading]=useState(true);const{data,loading,error}:fetchResponse=useFetch("/api/turso");return(<mainclassName="font-montserrat flex items-center justify-center"><section><h3className="text-2xl font-medium">SomeFancyDestinations</h3><pclassName="text-base">ListofVacationHomestoEnjoyonceinawhile</p>{loading&&<p>Loading...</p>}{error&&<p>Errorcounteredwhilefetching:{error}</p>}<divclassName="flex flex-col items-center justify-center gap-5 md:grid md:grid-cols-2 lg:grid-cols-3">{data?.map((item:QueryResult)=>(<divclassName="w-[300px] relative flex flex-col items-center justify-center p-4 m-4 bg-white rounded-xl shadow-md hover:shadow-lg transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"key={item.image_url}><Imagesrc={item.image_url}alt="Picture of the author"width={350}height={200}priority={false}onLoadingComplete={()=>setLoading(false)}draggable={false}className={cn("object-cover object-top duration-700 ease-in-out border-[1px]",isLoading?"scale-110 blur-2xl grayscale bg-blue-300":"scale-100 blur-0 grayscale-0")}/><h3className="text-lg">{item.name},{item.location}</h3></div>))}</div></section></main>);}
Enter fullscreen modeExit fullscreen mode

And that's it; you have created the Turso database, seeded the database, and queried it to your front-end application.

If you enjoy this, plz give it a thumbs up and check me out onTwitter.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Sharing my thoughts here, Love technologies that put optimizations and performance in mind.Twitter @BrightonMboya
  • Work
    Engineering @SandTechInc
  • Joined

More fromBrighton Mboya

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account
[8]ページ先頭
©2009-2025 Movatter.jp