How to Get Started with Xata: Try Our New Getting Started Guides
Tags: beginners, database, data, tutorial
Published: 2023-10-04 15:17:37

At Xata, we're always evolving. That's evident as we consistently update our [examples repo](https://github.com/xataio/examples) with new JavaScript frameworks. 

Our mission is to simplify the way developers work with data. This is ingrained in everything we do, from our products to the educational material we create to enable you to be productive with Xata. We're excited to share six new getting started guides for these popular full-stack JavaScript frameworks: Astro, Next.js, Nuxt, Remix, SolidStart, and SvelteKit.

The new getting started with Xata guides for [Astro][astro], [Next.js][nextjs], [Nuxt][nuxt], [Remix][remix], [SolidStart][solidstart], and [SvelteKit][sveltekit] walk you through building a blog application and, in doing so, help you learn some Xata fundamentals.

The guides demonstrate features such as:

- Using the [Xata CLI][cli] to create a database
- Defining a database schema and seeding the database by [importing a CSV][csv]
- TypeScript [code generation][codegen] with database branching
- [Querying and filtering][query-filter]
- [Full-text fuzzy search][search]

The guides also cover some specific framework features and how those work with Xata.

## Astro

With the recent launch of [Astro 3.0][astro-3], now is a great time to dive into the Xata and Astro Getting Started guide. This guide demonstrates using Xata database and full-text search in combination with Astro features such as [Static Site Generation (SSG)][astro-ssg], [dynamic routes][astro-dynamic], and [Server Side Rendering (SSR)][astro-ssr] via Astro "hybrid" mode.

[Get started with Xata and Astro →][astro]

## Next.js

Next.js is the most popular full-stack JavaScript framework on the planet. So, we've rewritten our existing guide to show how to integrate Xata database and full-text search into a [Next.js App router][nextjs-app-router] based application with [server components][nextjs-server-components]. The guide also covers [dynamic routes][nextjs-routes] and how to use search parameters to power full-text search.

[Get started with Xata and Next.js →][nextjs]

## Nuxt

The Nuxt and Xata Getting Started guide demonstrates integrating Xata database to retrieve the content via [Nuxt server/API routes][nuxt-routes], invoked on both the server and client. The guide also covers [Vue.js conditional rendering][vue-rendering] and how to use [Nuxt dynamic parameters][nuxt-params] to drive database and full-text search queries.

[Get started with Xata and Nuxt →][nuxt]

## Remix

The Xata and Remix Getting Started guide shows how to build a Xata database-driven application with full-text fuzzy search. It covers using the [`useLoaderData` Remix hook][remix-hook] to load data from a Xata database, using [Remix dynamic segments][remix-dynamic] to pass parameters within URLs, and how to use search parameters within a Remix application to integrate Xata's full-text fuzzy search.

[Get started with Xata and Remix →][astro]

## SolidStart

SolidStart is currently in beta, but shows a lot of promise. This new Xata with SolidStart Getting Started guide is an opportunity to learn some of the basics of Xata, [SolidStart][solidstart-website], and [SolidJS][solidjs]. It covers using [`createServerData$`][solid-createserverdata] and [`useRouteData`][solid-useroutedata] to load data from a Xata database, using the [`<Match />` and `<Switch />`][solid-match-switch], and [`<For />`][solid-for] SolidJS logic operators for conditional UI rendering. It also walks through defining and accessing path parameters using [dynamic routing][solid-routing] and how to access and use search parameters within a SolidStart application to integrate Xata's full-text fuzzy search.

[Get started with Xata and SolidStart →][solidstart]

## SvelteKit

The Xata and SvelteKit Getting Started guide demonstrates how to load data from a database using [SvelteKit data loading][sveltekit-data], how to render data using [Svelte logic blocks][svelte-logic] and [page parameters][svelte-params], and how to add full-text search to a SvelteKit application via [URL data][svelte-url-data].

[Get started with Xata and SvelteKit →][sveltekit]

## What should we write next?

We'd love to hear from you if you have any feedback on the guides or if you'd like to see guides for other frameworks or technologies.

So, reach out to us on [Discord](http://xata.io/discord) or join us on [Twitter / X](https://twitter.com/xata).

[astro-3]: https://astro.build/blog/astro-3/
[astro]:https://xata.io/docs/getting-started/astro
[astro-ssg]: https://docs.astro.build/en/core-concepts/routing/#static-ssg-mode
[astro-dynamic]: https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
[astro-ssr]: https://docs.astro.build/en/core-concepts/routing/#server-ssr-mode
[remix]:https://xata.io/docs/getting-started/remix/
[remix-hook]: https://remix.run/docs/en/main/hooks/use-loader-data
[remix-dynamic]: https://remix.run/docs/en/main/guides/routing#dynamic-segments
[solidstart]:https://xata.io/docs/getting-started/solidstart
[solidstart-website]: https://start.solidjs.com/
[solid-createserverdata]: https://start.solidjs.com/api/createServerData
[solid-useRouteData]: https://start.solidjs.com/api/useRouteData
[solid-match-switch]: https://www.solidjs.com/docs/latest/api#switchmatch
[solid-for]: https://www.solidjs.com/docs/latest/api#for
[solid-routing]: https://start.solidjs.com/core-concepts/routing
[solidjs]: https://solidjs.com/
[sveltekit]: https://xata.io/docs/getting-started/sveltekit
[sveltekit-data]: https://kit.svelte.dev/docs/load
[svelte-logic]: https://svelte.dev/docs/logic-blocks
[svelte-params]: https://kit.svelte.dev/docs/routing#page-page-js
[svelte-url-data]: https://kit.svelte.dev/docs/load#using-url-data
[nextjs]:https://xata.io/docs/getting-started/nextjs
[nextjs-app-router]: https://nextjs.org/docs/app
[nextjs-server-components]: https://nextjs.org/docs/app/building-your-application/rendering/server-components
[nextjs-routes]: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
[nuxt]:https://xata.io/docs/getting-started/nuxt
[nuxt-routes]: https://nuxt.com/docs/guide/directory-structure/server#server-routes
[nuxt-params]: https://nuxt.com/docs/guide/directory-structure/server#matching-route-parameters
[vue-rendering]: https://vuejs.org/guide/essentials/conditional.html
[cli]: https://xata.io/docs/getting-started/cli
[csv]: https://xata.io/blog/csv-import-export
[query-filter]: https://xata.io/docs/sdk/get
[search]: https://xata.io/docs/sdk/search
[codegen]: https://xata.io/docs/getting-started/cli#codegen