Back to Blog
Company

Nhost March 2022

7 April 2022
Transparent lines
Banner of Nhost March 2022

To all hackers,

Here are our product updates for March 2022.

React and Next.js SDK

This month we're releasing two SDKs for the most popular libraries and frameworks to build modern web apps: React and Next.js.

These two SDKs are specific to React (@nhost/react) and Next.js (@nhost/nextjs) and are built to take full advantage of the power of React and Next.js.

Both SDKs are built on top of the existing JavaScript SDK (@nhost/nhost-js). This means they work well together if you want to gradually adopt any of the new SDKs in your existing web app.

Let's take a close look at each respective SDK, starting with React.

React SDK for Nhost

The React SDK for Nhost is available at @nhost/react and provides React hooks to directly interact with Nhost.

This is how you initialize it:


_19
import React from 'react'
_19
import ReactDOM from 'react-dom'
_19
_19
import { NhostClient, NhostReactProvider } from '@nhost/react'
_19
_19
import App from './App'
_19
_19
const nhost = new NhostClient({
_19
backendUrl: 'https://xxx.nhost.run',
_19
})
_19
_19
ReactDOM.render(
_19
<React.StrictMode>
_19
<NhostReactProvider nhost={nhost}>
_19
<App />
_19
</NhostReactProvider>
_19
</React.StrictMode>,
_19
document.getElementById('root'),
_19
)

Once you've wrapped your app with the NhostReactProvider you can start using Nhost React hooks anywhere in your app.

As an example this is how you can sign up users using the useSignUpEmailPassword hook:


_10
const { signUpEmailPassword, isLoading, isSuccess, isError, error } =
_10
useSignUpEmailPassword()

Or check authentication status:


_10
const { isLoading, isAuthenticated } = useAuthenticationStatus()
_10
_10
if (isLoading) {
_10
return <div>Loading Nhost authentication status...</div>
_10
} else if (isAuthenticated) {
_10
return <div>User is authenticated</div>
_10
} else {
_10
return <div>Public section</div>
_10
}

Check out the full documentation in our docs: https://docs.nhost.io/reference/react

Next.js SDK for Nhost

In addition to the React SDK, we're also releasing a Next.js SDK, available at @nhost/nextjs. Our Next.js SDK builds on top of the React SDK but has extra support for Server-Side Rendering (SSR).

This is how you would add it to Next.js:


_23
// pages/_app.tsx
_23
import type { AppProps } from 'next/app'
_23
_23
import { NhostClient, NhostNextProvider } from '@nhost/nextjs'
_23
_23
import Header from '../components/Header'
_23
_23
const nhost = new NhostClient({
_23
backendUrl: 'https://xxx.nhost.run',
_23
})
_23
_23
function MyApp({ Component, pageProps }: AppProps) {
_23
return (
_23
<NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
_23
<div>
_23
<Header />
_23
<Component {...pageProps} />
_23
</div>
_23
</NhostNextProvider>
_23
)
_23
}
_23
_23
export default MyApp

Read more about how we solved authentication with SSR here and how you can protect routes from non-authenticated users here.

Full documentation for our Next.js SDK: https://docs.nhost.io/reference/nextjs

Sleeping Inactive Free Apps

For us to be able to keep offering free apps at Nhost we need to take some measures to lower our infrastructure bill (I hope Jeff can fly to the moon regardless). This means we will sleep apps that are inactive (no incoming network request) for more than 7 days. You can always wake a sleeping app from the Nhost dashboard. To avoid having your app sleeping (plus extra features and resources) you can upgrade to the Pro plan which we'll release in the coming weeks. Stay tuned!

Storage UI

The new Nhost Storage we released with Nhost v2 works a bit differently compared to Nhost v1. The new Nhost Storage stores file metadata in the database to be able to take full advantage of Hasura's Permission system. This is great because all the permissions are now inside Hasura, but we could not use our Nhost v1 storage UI. That's why we're releasing a new Nhost Storage UI! It's available under the “Files” menu in your Nhost app.

Nhost Storage UINhost Storage UI

Discord and Twitch

Building a gaming community? Great news! We've added support to sign-in users with both Discord and Twitch, two of the most popular platforms for Gaming. We're thinking of adding Apple and Twitter next. What do you think? Let us know what OAuth providers you would like to see next by creating a GitHub issue here: https://github.com/nhost/nhost/issues Nhost now has support to sign in with the following providers:

Nhost OAuth ProvidersNhost OAuth Providers

Nhost on Redwood JS

RedwoodJS is releasing their v1.0.0 this week and Nhost is one of the supported auth.

Get started

Create a Nhost App for free and start building: https://app.nhost.io/

PS. Support us on GitHub

It would mean the world to us if you gave us a star on GitHub. This way, we can increase the visibility of Nhost and our open source and GraphQL contributions.

Star us on GitHub ⭐

Thank you

Share this post

Twitter LogoLinkedIn LogoFacebook Logo