react-speech-recognition with Next.Js
Hey ya'll, anyone have any experience using the react-speech-recognition library with next.js? I cant seem to get my grammar setup, and cant find steps anywhere. Anyone able to help?
I need a bit of help understanding trpc
I've got everything set up as per the next-auth starter.
I've got a query that gets me an index of things with ids, and then I need to loop over those things and use each id and call another query per item. Finally I want to make a state of { thingWithId, ListofThings }
I can't find a way to do this:...
Dynmic routing
Tried dynamic routing but getting a null value ```"use client"
import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
...
Filters while maintaining SSG
guys i met an interesting problem, i have a ecommerce site that uses Next13 SSG, but i want to have filters on the all product page. If i use searchParams I get yeeted out of SSG. is it possible to have filters while maintaining SSG?
maybe build param based paths for all possible combinations at build time? is there a better alternative?...
Next-auth and standalone trpc
My team is using nextjs with a standalone trpc server and I'm trying to set up Next-Auth. When I try to run
getServerSession on the request in order to add it to my trpc context I'm just receiving null, and I also have a type error coming up:
```ts
Argument of type '[IncomingMessage, ServerResponse<IncomingMessage>, AuthOptions]' is not assignable to parameter of type 'GetServerSessionParams<AuthOptions>'.
Type '[IncomingMessage, ServerResponse<IncomingMessage>, AuthOptions]' is not assignable to type '[IncomingMessage & { cookies: Partial<{ [key: string]: string; }>; }, ServerResponse<IncomingMessage>, AuthOptions]'.
Type at position 0 in source is not compatible with type at position 0 in target....Anyone use Webstorm with the T3 Stack? Seems incompatible
I'm following the new T3 stack tutorial in Webstorm and I got stuck for a ~couple hours~ trying to resolve why types weren't being inferred in the simple hello.data example that comes with create-t3-app. In VS, when I hover over data you get exactly what you'd expect. However, when you hover over data in Webstorm you get the following type:
const data: TProcedure["_def"]["_config"]["transformer"] extends DefaultDataTransformer ? Serialize<TProcedure["_def"]["_output_out"]> : TProcedure["_def"]["_output_out"] | undefined
Has anyone been able to use TRPC / Typescript with Webstorm or is this a lost cause. Been following Theo for awhile and I was excited to use the T3 stack and I've been using Webstorm for the last year in my first job so I'd be disappointed if I had to switch back to VSCode but it's not the end of the world....
How to Push schema from drizzle to planetscale
I've moved from Prisma to Drizzle, but wondering if there is an alternative to the
prisma db push@import is always async?
I'm trying to use adopted stylesheets with a fallback using:
...
<style>@import url(styles.css);</style>
<style>@import url(styles.css);</style>
Vitest Test can't load serverRuntimeConfig
Hey im currently running into this error:
```ts
FAIL src/server/tests/userid.test.ts [ src/server/tests/userid.test.ts ]
TypeError: Cannot destructure property 'serverRuntimeConfig' of 'default(...)' as it is undefined.
❯ src/server/trpc/router/distribution-report.ts:20:9...
How do you do cypress component testing?
it's hard to handle the tailwind css...
Or there is a solution, but it may be too troublesome.
Maybe not caring about style is the best choice?...
App Router and shallow routing?
Hey,
Perhaps I have not fully adjusted my mental model to NextJS 13 App Router but how would I perform shallow routing?
A part of my application's state is managed via the URL query params such that users can easily bookmark a page or share the link. Using the page dir, I could just do
router.push('...', { shallow: true }), which updated my my frontend but did not hit my backend. How would I achieve this using the app router?
I know that my server components do not depend on the query params but I guess NextJS cannot now that, which is why it triggers a full refresh? Also I know that I should wrap my navigation in a startTransition(() => {...}) to keep the client side state. I guess this works but I'm still hitting my backend which is not what I want....prisma.update returns promise but doesn't do anything (most of the time)
As described in the title, prisma.update does not reliably trigger an update in the database.
This is the gist of my code:
```
.middleware(...) //<-- works just fine
.onUploadComplete(({ file }) => {...
Is there a specific way to integrate react router in t3?
this may seem trivial but I've had lots of trouble with it.
When I put router(browserRouter) tag around the <component> tag in _app.tsx I always get document is not defined error.
I've tried other places and I get the same error， so I wonder if there's another way to use react router in t3(nextjs) because I've not seen anybody else having this trouble.
my app is only half built but it seems like a lot of work to migrate to app router.
import { Link, Navigate, Routes, Route, BrowserRouter as Router} from "react-router-dom";...
Next local font/Tailwind incompatibility with Safari
I'm really stuck on how to get past two issues with the site I'm making. Would deeply appreciate any help.
The first is my local font not rendering correctly on Safari.
I'm using Next local font to import it like so.
...
Exporting prisma types from turborepo package
Referencing the
packages/db package in the create t3 turbo repo, the index.ts file re-exports all the named exports from @prisma/client (export * from "@prisma/client"). I can import the generated prisma models just fine, but I can't seem to import the types. Are types exported with the wildcard re-export?Best database for a social network if starting from scratch today?
Database Gurus, I’d love your advice! I’m building a new social network that has a combination of a feed/wall and a Discord-style chat. What database would you recommend and why? Eg. SQL, noSQL or a combination of the two and what types eg. MySQL, DynamoDB etc
Edge Server Actions
How can they be configured in server actions?
```ts
"use server";
import { revalidatePath } from "next/cache";...
Component re-renders after state change, tRPC query not executed again?
I have a component where I render out a table. Each row has a checkbox. Each checked row can be deleted. I am using tRPC to query and paginate the data in the table and also to delete the rows using Prisma. After deleting the checked rows, I want the table to re-render and display the items minus the ones previously deleted.
Everything tRPC-ish works (I think). The component get's re-rendered after the mutation, but I the table only get's updated after I switch windows (i.e. bringing VSCode in the front, then back to Chrome). What is causing this behaviour? Am I missing something using on the tRPC side of things?...
Solution:
trpc doesnt refetch on rerender