Next.js 13.4 App Directory Support

Testing

We're preparing for Solito v4!

yarn add solito

What

This PR aims to add Next.js App Directory support, bringing the best-of-both-worlds stack into a new phase.

The goals of this PR and its APIs follow the Solito philosophy you're used to: extend Next.js APIs, make them work on native, and add adjustments where they inevitably diverge.

Please keep in mind that all React Native UI components are "client" components, so you should use client whenever you use them beyond container React Server Components.

The following changes are included:

`solito/link`

Link and TextLink components are now marked with use client, making them compatible with RSC and the app directory.

`solito/navigation`

Following the Next.js approach, there is now a new import, solito/navigation, for the App Directory hooks. You will use this instead of other imports you may be used to, such as solito/router for useRouter, and solito for createParam.

The following hooks are added:

useRouter: Similar to the useRouter hook from solito/router, adapted for the App Directory by following the next/navigation conventions. It has the same behavior on iOS and Android.
useParams: Read dynamic segment parameters (/users/[userId]) as { userId: string }.
useSearchParams: Read URL search parameters using the URLSearchParams class.
usePathname: The much-requested hook to read the current path. On native, this is only safe if you're using Expo Router. This hook may change in the future, depending on its stability on native.
useUpdateSearchParams: A convenience hook to update search parameters as an object. Calls setParams on native, and router.push or router.replace on Web (configurable).
useLink The same hook that exists now from solito/link, adapted for the App Directory. You can call this to create accessible, custom link components.

The hooks mirror Next.js as closely as possible, along with some additional typesafety.

Let's explore the usage for each hook.

`useRouter`

'use client'

import { useRouter } from 'solito/navigation'

export function MyClientComponent() {
  const router = useRouter()

  const onPress = () => {
    router.push('/users/fernando')
  }
}

`useParams`

100% feature parity with the Next.js hook.

'use client';

import { useParams } from 'solito/navigation';

type Params = { tag: string, item: string }

export default function ExampleClientComponent() {
  const params = useParams<Params>();

  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params);

  return <></>;
}

If you want to reuse the types, and you're using a sufficiently-recent version of TypeScript, you can create a custom function with the wrapped type:

import { useParams } from 'solito/navigation';

type Params = { tag: string, item: string }

export const useShoppingParams = useParam<Params>

// then in your component:
const params = useShoppingParams()

`useSearchParams`

100% feature parity with the Next.js hook.

'use client';

import { useSearchParams } from 'solito/navigation';

type Params = { search: string }

export default function ExampleClientComponent() {
  const params = useSearchParams<Params>();

  const search = searchParams.get('search');

  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'

  return <></>;
}

usePathname

100% feature parity with the Next.js hook.

'use client';

import { usePathname } from 'solito/navigation';

export default function ExampleClientComponent() {
  const pathname = usePathname();

  // /dashboard?search=hi
  // pathname is /dashboard

  return <>Current pathname: {pathname}</>;
}

Please keep in mind that this hook may not be perfectly safe to use on iOS / Android if you haven't gone all-in on using links to power navigation for React Navigation. If all screens have a linking config, then this should be safe. Expo Router users can use this hook safely.

I am looking into adding support for usePathname for solito/router too, allowing its usage in non-app directory folders.

`useUpdateSearchParams`

A Solito hook to update search parameters.

'use client'

type Params = {
  id: string
}

export function App() {
  const updateParams = useUpdateSearchParams<Params>()

  const onPress = () => {
    updateParams({ id: '123' })

    // by default, router.replace is called on Web if you're updating an existing param
    // to override this, see the  webBehavior property
    updateParams({ id: '123' }, { webBehavior: 'push' })
  }
}

On native, setParams is called. On Web

Name	Status	Preview	Comments	Updated (UTC)
solito-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2023 3:16pm
solito-s9oj	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2023 3:16pm

nandorojo / solito