docs: minor improvements (#784)

.changeset/calm-stingrays-end.md

@@ -0,0 +1,6 @@
+---
+"create-t3-app": patch
+"@ct3a/www": patch
+---
+
+fix(t3-app): fix broken links

cli/template/addons/trpc/auth-router.ts

@@ -5,6 +5,6 @@ export const authRouter = router({
     return ctx.session;
   }),
   getSecretMessage: protectedProcedure.query(() => {
-    return "you can see this secret message!";
+    return "you can now see this secret message!";
   }),
 });

cli/template/base/src/pages/index.tsx

@@ -17,14 +17,20 @@ const Home: NextPage = () => {
             Create <span className={styles.pinkSpan}>T3</span> App
           </h1>
           <div className={styles.cardRow}>
-            <Link className={styles.card} href="https://beta.nextjs.com">
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/usage/first-steps"
+            >
               <h3 className={styles.cardTitle}>First Steps →</h3>
               <div className={styles.cardText}>
                 Just the basics - Everything you need to know to set up your
                 database and authentication.
               </div>
             </Link>
-            <Link className={styles.card} href="https://beta.nextjs.com">
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/introduction"
+            >
               <h3 className={styles.cardTitle}>Documentation →</h3>
               <div className={styles.cardText}>
                 Learn more about Create T3 App, the libraries it uses, and how

cli/template/page-studs/index/with-auth-trpc.tsx

@@ -22,14 +22,20 @@ const Home: NextPage = () => {
             Create <span className={styles.pinkSpan}>T3</span> App
           </h1>
           <div className={styles.cardRow}>
-            <Link className={styles.card} href="https://beta.nextjs.com">
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/usage/first-steps"
+            >
               <h3 className={styles.cardTitle}>First Steps →</h3>
               <div className={styles.cardText}>
                 Just the basics - Everything you need to know to set up your
                 database and authentication.
               </div>
             </Link>
-            <Link className={styles.card} href="https://beta.nextjs.com">
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/introduction"
+            >
               <h3 className={styles.cardTitle}>Documentation →</h3>
               <div className={styles.cardText}>
                 Learn more about Create T3 App, the libraries it uses, and how

cli/template/page-studs/index/with-trpc.tsx

@@ -21,14 +21,20 @@ const Home: NextPage = () => {
             Create <span className={styles.pinkSpan}>T3</span> App
           </h1>
           <div className={styles.cardRow}>
-            <Link className={styles.card} href="https://beta.nextjs.com">
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/usage/first-steps"
+            >
               <h3 className={styles.cardTitle}>First Steps →</h3>
               <div className={styles.cardText}>
                 Just the basics - Everything you need to know to set up your
                 database and authentication.
               </div>
             </Link>
-            <Link className={styles.card} href="https://beta.nextjs.com">
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/introduction"
+            >
               <h3 className={styles.cardTitle}>Documentation →</h3>
               <div className={styles.cardText}>
                 Learn more about Create T3 App, the libraries it uses, and how

www/src/components/landingPage/stack/stack.astro

@@ -63,7 +63,7 @@ import Feature from "./card.astro";
           <Fragment slot="description">
             Prisma is the best way to work with databases in TypeScript. It
             provides a simple, type-safe API to query your database, and it can
-            be used with most SQL dialects (and Mongo too!)
+            be used with most SQL dialects (and Mongo too!).
           </Fragment>
         </Feature>
 
@@ -129,7 +129,7 @@ import Feature from "./card.astro";
           <Fragment slot="description">
             If your frontend and backend are TypeScript, it's really hard to
             beat the DX of tRPC. Kinda like GraphQL but without the work -
-            seriously this lib is magic
+            seriously this lib is magic.
           </Fragment>
         </Feature>
 

www/src/pages/en/deployment/vercel.md

@@ -8,7 +8,7 @@ We recommend deploying your app to [Vercel](https://vercel.com/?utm_source=t3-os
 
 ## Project Configuration
 
-Vercel will likely configure your build command and publish directory automatically. However, you can also specify this information along with other configuration by creating a file called [`vercel.json`](https://vercel.com/docs/project-configuration) and including the following commands:
+Vercel will likely configure your build command and publish the directory automatically. However, you can also specify this information along with other configurations by creating a file called [`vercel.json`](https://vercel.com/docs/project-configuration) and including the following commands:
 
 ```json
 {

www/src/pages/en/faq.md

@@ -15,7 +15,7 @@ If you are not familiar with the different technologies used in this project, pl
 - [Next.js](https://nextjs.org/)
 - [NextAuth.js](https://next-auth.js.org)
 - [Prisma](https://prisma.io)
-- [TailwindCSS](https://tailwindcss.com)
+- [Tailwind CSS](https://tailwindcss.com)
 - [tRPC](https://trpc.io)
 
 ## What learning resources are currently available?

www/src/pages/en/other-recs.md

@@ -25,7 +25,7 @@ The "modern, simple Redux" you didn't know you needed. [Poimandres](https://gith
 
 **For never using Context again**
 
-For a more atomic approach, Jotai is hard to beat. Also by [Poimandres](https://github.com/pmndrs), Jotai lets you define singletons that feel like global useState. Great option for stateful behaviors that don't need a state machine just yet.
+For a more atomic approach, Jotai is hard to beat. Also by [Poimandres](https://github.com/pmndrs), Jotai lets you define singletons that feel like global useState. A great option for stateful behaviors that don't need a state machine just yet.
 
 - [Jotai Homepage](https://jotai.org/)
 - [Jotai GitHub](https://github.com/pmndrs/jotai)
@@ -36,7 +36,7 @@ Most apps need the same handful of components - toggle buttons, dropdown menus,
 
 ### Unstyled Component Libraries
 
-Also known as headless libraries, they provide great unstyled and accessible components that you can customize to your liking. Here are a few recommendations.
+Also known as headless libraries, they provide great unstyled, and accessible components that you can customize to your liking. Here are a few recommendations.
 
 - [Radix UI](https://www.radix-ui.com/) gives you a powerful set of convenient and accessible primitives that you can style with vanilla or Tailwind CSS.
 
@@ -99,15 +99,15 @@ Vercel took the hell of web deployments and made it a set-and-forget GitHub inte
 
 **For databases without the worry**
 
-PlanetScale is the best "serverless database platform" we've used by far. Insane scale, great developer experience, fantastic pricing. If you're using SQL (and hopefully Prisma), this is hard to beat.
+PlanetScale is the best "serverless database platform" we've used by far. Insane scale, great developer experience, and fantastic pricing. If you're using SQL (and hopefully Prisma), this is hard to beat.
 
 - [PlanetScale Homepage](https://planetscale.com/)
 
 ### Railway
 
 **For hosting your infra**
 
-"Modern Heroku". Easiest way to get a real server up and running. If Vercel and PlanetScale aren't enough, Railway probably is. Point it at a GitHub repo and go.
+"Modern Heroku". The easiest way to get a real server up and running. If Vercel and PlanetScale aren't enough, Railway probably is. Point it at a GitHub repo and go.
 
 - [Railway Homepage](https://railway.app/)
 
@@ -129,7 +129,7 @@ If WebSockets are the primary focus of your project, you may want to consider a
 
 ### Soketi
 
-Soketi is an self-hostable, simple, and fast alternative to Pusher. It's fully compatible with the Pusher SDK which you can use to connect to the server. Soketi serverless is also in beta.
+Soketi is a self-hostable, simple, and fast alternative to Pusher. It's fully compatible with the Pusher SDK which you can use to connect to the server. Soketi serverless is also in beta.
 
 - [Soketi Homepage](https://soketi.app)
 - [Soketi GitHub](https://github.com/soketi/soketi)

www/src/pages/en/usage/env-variables.md

@@ -16,7 +16,7 @@ Create-T3-App uses [Zod](https://github.com/colinhacks/zod) for validating your
 
 The content of these files may seem scary at first glance, but don't worry, it's not as complicated as it looks. Let's take a look at them one by one, and walk through the process of adding additional environment variables.
 
-_TLDR; If you want to add a new environment variable, you must add it to both your `.env` as well as defining the validator in `env/schema.mjs`._
+_TLDR; If you want to add a new environment variable, you must add it to both your `.env` as well as define the validator in `env/schema.mjs`._
 
 ## schema.mjs
 
@@ -40,7 +40,7 @@ export const clientEnv = {
 
 Define your server-side environment variables schema here.
 
-Make sure you do not prefix keys in here with `NEXT_PUBLIC`. Validation will fail if you do to help you detect invalid configuration.
+Make sure you do not prefix keys here with `NEXT_PUBLIC`. Validation will fail if you do to help you detect invalid configuration.
 
 ### Client Schema
 
@@ -88,7 +88,7 @@ Since the default `.env` file is not committed to version control, we have also
 
 To ensure your build never completes without the environment variables the project needs, you will need to add new environment variables in **two** locations:
 
-📄 `.env`: Enter your environement variable like you would normally do in a `.env` file, i.e. `KEY=VALUE`
+📄 `.env`: Enter your environment variable like you would normally do in a `.env` file, i.e. `KEY=VALUE`
 
 📄 `schema.mjs`: Add the appropriate validation logic for the environment variable by defining a Zod schema, e.g. `KEY: z.string()`
 

www/src/pages/en/usage/next-auth.md

@@ -4,7 +4,7 @@ description: Usage of NextAuth.js
 layout: ../../../layouts/docs.astro
 ---
 
-When you want an authentication system in your Next.js application, NextAuth.js is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication, and provides adapters for many databases and ORMs.
+When you want an authentication system in your Next.js application, NextAuth.js is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication and provides adapters for many databases and ORMs.
 
 ## Context Provider
 
@@ -70,7 +70,7 @@ When using NextAuth.js with tRPC, you can create reusable, protected procedures
 
 This is done in a two step process:
 
-1. Grab the session from the request headers using the [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession) function. Don't worry, this function is safe to use - the name includes `unstable` only because the API implementation might change in the future. The advantage of using `unstable_getServerSession` instead of the regular `getSession` is that its a server-side only function and doesn't trigger unnecessary fetch calls. `create-t3-app` creates a helper function that abstracts this peculiar API away.
+1. Grab the session from the request headers using the [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession) function. Don't worry, this function is safe to use - the name includes `unstable` only because the API implementation might change in the future. The advantage of using `unstable_getServerSession` instead of the regular `getSession` is that it's a server-side only function and doesn't trigger unnecessary fetch calls. `create-t3-app` creates a helper function that abstracts this peculiar API away.
 
 ```ts:server/common/get-server-auth-session.ts
 export const getServerAuthSession = async (ctx: {
@@ -134,9 +134,9 @@ Getting NextAuth.js to work with Prisma requires a lot of [initial setup](https:
 
 ### Adding new fields to your models
 
-When adding new fields to any of the `User`, `Account`, `Session` or `VerificationToken` models (most likely you'd only need to modify the `User` model), you need to keep in mind that the [Prisma adapter](https://next-auth.js.org/adapters/prisma) automatically creates fields on these models when new users sign up and log in. Therefore, when adding new fields to these models, you must provide default values for them, since the adapter is not aware of these fields.
+When adding new fields to any of the `User`, `Account`, `Session`, or `VerificationToken` models (most likely you'd only need to modify the `User` model), you need to keep in mind that the [Prisma adapter](https://next-auth.js.org/adapters/prisma) automatically creates fields on these models when new users sign up and log in. Therefore, when adding new fields to these models, you must provide default values for them, since the adapter is not aware of these fields.
 
-If for example you'd like to add a `role` to the `User` model, you would need to provide a default value to the `role` field. This is done by adding a `@default` value to the `role` field in the `User` model:
+If for example, you'd like to add a `role` to the `User` model, you would need to provide a default value to the `role` field. This is done by adding a `@default` value to the `role` field in the `User` model:
 
 ```diff:prisma/schema.prisma
 + enum Role {

www/src/pages/en/usage/prisma.md

@@ -16,11 +16,11 @@ You will find the Prisma schema file at `/prisma/schema.prisma`. This file is wh
 
 ### With NextAuth.js
 
-When you select NextAuth.js in combination with Prisma, the schema file is generated and set up for you with the recommended values for the `User`, `Session`, `Account` and `VerificationToken` models, as per the [NextAuth.js documentation](https://next-auth.js.org/adapters/prisma).
+When you select NextAuth.js in combination with Prisma, the schema file is generated and set up for you with the recommended values for the `User`, `Session`, `Account`, and `VerificationToken` models, as per the [NextAuth.js documentation](https://next-auth.js.org/adapters/prisma).
 
 ## Default Database
 
-The default database is a SQLite database, which is great for development and quickly spinning up a proof-of-concept, but not recommended for production. You can change the database to use by changing the `provider` in the `datasource` block to either `postgresql` or `mysql`, and then updating the connection string within environment variables to point to your database.
+The default database is an SQLite database, which is great for development and quickly spinning up a proof-of-concept but is not recommended for production. You can change the database to use by changing the `provider` in the `datasource` block to either `postgresql` or `mysql`, and then updating the connection string within environment variables to point to your database.
 
 ## Seeding your Database