Chore: Update all instances of NextJS with Next.js (#18521)
Update all instances of NextJS with Next.js
This commit is contained in:
Jon Meyers
GitHub
@@ -14,7 +14,7 @@ const HomePageCover = (props) => {
|
||||
href: '/guides/getting-started/quickstarts/reactjs',
|
||||
},
|
||||
{
|
||||
tooltip: 'NextJS',
|
||||
tooltip: 'Next.js',
|
||||
icon: '/docs/img/icons/nextjs-icon',
|
||||
href: '/guides/getting-started/quickstarts/nextjs',
|
||||
},
|
||||
|
||||
@@ -171,7 +171,7 @@ We will also need to check for the `next` query parameter to redirect the user t
|
||||
// for your app/framework. This is just an example.
|
||||
const next = url.searchParams.get('next')
|
||||
|
||||
// using NextJS API response object in this example
|
||||
// using Next.js API response object in this example
|
||||
res.redirect(next)
|
||||
```
|
||||
|
||||
|
||||
@@ -203,10 +203,10 @@ export const quickstarts = [
|
||||
|
||||
export const webapps = [
|
||||
{
|
||||
title: 'NextJS',
|
||||
title: 'Next.js',
|
||||
href: '/guides/getting-started/tutorials/with-nextjs',
|
||||
description:
|
||||
'Learn how to build a user management app with NextJS and Supabase Database, Auth, and Storage functionality.',
|
||||
'Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.',
|
||||
icon: '/docs/img/icons/nextjs-icon',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
|
||||
export const meta = {
|
||||
title: 'Build a User Management App with NextJS',
|
||||
description: 'Learn how to use Supabase in your Next App.',
|
||||
title: 'Build a User Management App with Next.js',
|
||||
description: 'Learn how to use Supabase in your Next.js App.',
|
||||
}
|
||||
|
||||
<QuickstartIntro />
|
||||
@@ -79,7 +79,7 @@ Install the auth helpers for Next.js
|
||||
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
|
||||
```
|
||||
|
||||
### NextJS Middleware
|
||||
### Next.js Middleware
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
|
||||
@@ -38,7 +38,7 @@ By [Traversy Media](https://www.youtube.com/watch?v=7uKQBl9uZ00).
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
### Build an App With Supabase and NextJS
|
||||
### Build an App With Supabase and Next.js
|
||||
|
||||
By [@jlengstorf](https://twitter.com/jlengstorf) and [@jonmeyers_io](https://twitter.com/jonmeyers_io).
|
||||
|
||||
@@ -116,8 +116,8 @@ Build a basic Todo List with Supabase and your favorite frontend framework:
|
||||
- Supabase Auth with Sapper SSR. [Blog](https://dev.to/jakobbouchard/how-to-setup-supabase-auth-with-sapper-ssr-13od)
|
||||
- Switch from Firebase Auth to Supabase Auth. [Blog](https://msyyn.medium.com/switch-from-firebase-auth-to-supabase-auth-the-open-source-firebase-alternative-509746952b1b)
|
||||
- Setting up Umami Analytics with Supabase. [Blog](https://dev.to/jakobbouchard/setting-up-umami-with-vercel-and-supabase-3a73)
|
||||
- Creating New Supabase Users In NextJS. [Blog](https://www.aboutmonica.com/blog/creating-new-supabase-users-in-next-js)
|
||||
- Creating Protected Routes In NextJS With Supabase. [Blog](https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- Creating New Supabase Users In Next.js. [Blog](https://www.aboutmonica.com/blog/creating-new-supabase-users-in-next-js)
|
||||
- Creating Protected Routes In Next.js With Supabase. [Blog](https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- Migrate from Google Cloud Storage (GCS) to Supabase Storage [Gist](https://gist.github.com/danalloway/86f79efd5ca336ff7364554ac3104014)
|
||||
- Subscriptions with Supabase and Stripe Billing [Blog](https://www.sandromaglione.com/2021/04/29/supabase-auth-create-stripe-customer-subscription-supabase-stripe-billing-part-1/)
|
||||
- Flutter Supabase Authentication [Blog](https://www.sandromaglione.com/2021/04/24/flutter-supabase-authentication/)
|
||||
|
||||
@@ -186,11 +186,11 @@ supabase.storage["bucket"].downloadAuthenticatedTo("image.jpg", file) {
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
## NextJS Loader
|
||||
## Next.js Loader
|
||||
|
||||
You can use Supabase Image Transformation to optimize your NextJS images using a custom [Loader](https://nextjs.org/docs/api-reference/next/image#loader-configuration).
|
||||
You can use Supabase Image Transformation to optimize your Next.js images using a custom [Loader](https://nextjs.org/docs/api-reference/next/image#loader-configuration).
|
||||
|
||||
To get started, create a `supabase-image-loader.js` file in your NextJS project which exports a default function:
|
||||
To get started, create a `supabase-image-loader.js` file in your Next.js project which exports a default function:
|
||||
|
||||
```ts
|
||||
const projectId = '' // your supabase project id
|
||||
@@ -202,7 +202,7 @@ export default function supabaseLoader({ src, width, quality }) {
|
||||
}
|
||||
```
|
||||
|
||||
In your `nextjs.config.js` file add the following configuration to instruct NextJS to use our custom loader
|
||||
In your `nextjs.config.js` file add the following configuration to instruct Next.js to use our custom loader
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
@@ -213,7 +213,7 @@ module.exports = {
|
||||
}
|
||||
```
|
||||
|
||||
At this point you are ready to use the `Image` component provided by NextJS
|
||||
At this point you are ready to use the `Image` component provided by Next.js
|
||||
|
||||
```tsx
|
||||
import Image from 'next/image'
|
||||
|
||||
@@ -134,7 +134,7 @@ Here's a collection of resources that will help you get started building with Su
|
||||
- [Send SMS notifications using Twilio](https://www.twilio.com/blog/send-sms-notifications-supabase-users-node-js-twilio-messaging)
|
||||
- [How to Integrate Supabase in Your Ionic App](https://www.youtube.com/watch?v=pl9XfIWutKE) [video]
|
||||
- [Building a Slack clone with authentication and realtime data syncing using Supabase](https://www.youtube.com/watch?v=LUMxJ4w-MUU) [video]
|
||||
- [Creating Protected Routes In NextJS With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- [Creating Protected Routes In Next.js With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
|
||||
### Additional Info
|
||||
|
||||
|
||||
@@ -158,4 +158,4 @@ If you're inspired to build, here's a collection of resources that will help you
|
||||
- [Send SMS notifications using Twilio](https://www.twilio.com/blog/send-sms-notifications-supabase-users-node-js-twilio-messaging)
|
||||
- [How to Integrate Supabase in Your Ionic App](https://www.youtube.com/watch?v=pl9XfIWutKE) [video]
|
||||
- [Building a Slack clone with authentication and realtime data syncing using Supabase](https://www.youtube.com/watch?v=LUMxJ4w-MUU) [video]
|
||||
- [Creating Protected Routes In NextJS With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- [Creating Protected Routes In Next.js With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
|
||||
@@ -139,7 +139,7 @@ Here's a collection of resources that will help you get started building with Su
|
||||
- [Send SMS notifications using Twilio](https://www.twilio.com/blog/send-sms-notifications-supabase-users-node-js-twilio-messaging)
|
||||
- [How to Integrate Supabase in Your Ionic App](https://www.youtube.com/watch?v=pl9XfIWutKE) [video]
|
||||
- [Building a Slack clone with authentication and realtime data syncing using Supabase](https://www.youtube.com/watch?v=LUMxJ4w-MUU) [video]
|
||||
- [Creating Protected Routes In NextJS With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- [Creating Protected Routes In Next.js With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
|
||||
### Additional Info
|
||||
|
||||
|
||||
@@ -156,4 +156,4 @@ If you're inspired to build, here's a collection of resources that will help you
|
||||
- [Send SMS notifications using Twilio](https://www.twilio.com/blog/send-sms-notifications-supabase-users-node-js-twilio-messaging)
|
||||
- [How to Integrate Supabase in Your Ionic App](https://www.youtube.com/watch?v=pl9XfIWutKE) [video]
|
||||
- [Building a Slack clone with authentication and realtime data syncing using Supabase](https://www.youtube.com/watch?v=LUMxJ4w-MUU) [video]
|
||||
- [Creating Protected Routes In NextJS With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- [Creating Protected Routes In Next.js With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
|
||||
@@ -133,7 +133,7 @@ Here's a collection of resources that will help you get started building with Su
|
||||
- [Send SMS notifications using Twilio](https://www.twilio.com/blog/send-sms-notifications-supabase-users-node-js-twilio-messaging)
|
||||
- [How to Integrate Supabase in Your Ionic App](https://www.youtube.com/watch?v=pl9XfIWutKE) [video]
|
||||
- [Building a Slack clone with authentication and realtime data syncing using Supabase](https://www.youtube.com/watch?v=LUMxJ4w-MUU) [video]
|
||||
- [Creating Protected Routes In NextJS With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
- [Creating Protected Routes In Next.js With Supabase](https://aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase)
|
||||
|
||||
### Additional Info
|
||||
|
||||
|
||||
@@ -169,7 +169,7 @@ Retool has put together a brilliant 10 minute admin panel setup using Supabase w
|
||||
|
||||
### Learn with Jason
|
||||
|
||||
Jason Lengstorf caught up with our very own [Jon Meyers](https://jonmeyers.io/) on his awesome show, [Learn with Jason](https://www.youtube.com/watch?v=8vqY1KT4TLU), to talk about building an app [with Supabase and NextJS](https://supabase.com/docs/guides/with-nextjs).
|
||||
Jason Lengstorf caught up with our very own [Jon Meyers](https://jonmeyers.io/) on his awesome show, [Learn with Jason](https://www.youtube.com/watch?v=8vqY1KT4TLU), to talk about building an app [with Supabase and Next.js](https://supabase.com/docs/guides/with-nextjs).
|
||||
|
||||
<div className="video-container">
|
||||
<iframe
|
||||
|
||||
@@ -34,7 +34,7 @@ Think NFTs meet Instagram, this app lets you browse, like, and comment on NFTs.
|
||||
|
||||
[Pgm Dictionary](https://github.com/n4ze3m/PgmDictionary) - by [@n4ze3m](https://twitter.com/n4ze3m)
|
||||
|
||||
This UrbanDictionary clone uses NextJS, Mantine, and Supabase to power a community dictionary project.
|
||||
This UrbanDictionary clone uses Next.js, Mantine, and Supabase to power a community dictionary project.
|
||||
|
||||
A great idea that deserves some silver tees!
|
||||
|
||||
|
||||
@@ -64,7 +64,7 @@ learning web development about a year ago. Just super basic stuff. Going through
|
||||
with a bunch of Treehouse video tutorials. As I slowly started progressing, I started incorporating the
|
||||
stuff that I'm more familiar with, which is 3D.
|
||||
|
||||
Once I was through that learning phase, I started looking into how I could create a web app with 3D. That’s another layer of complexity in terms of all the different stacks that you can build on, and I was trying to learn all of them at the same time. During that time I came across an Egghead video series on how to build a SaaS product with nextJS, Supabase, and Stripe.
|
||||
Once I was through that learning phase, I started looking into how I could create a web app with 3D. That’s another layer of complexity in terms of all the different stacks that you can build on, and I was trying to learn all of them at the same time. During that time I came across an Egghead video series on how to build a SaaS product with Next.js, Supabase, and Stripe.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ toc_depth: 9
|
||||
video: https://www.youtube.com/v/VgYPGOr3F-4
|
||||
---
|
||||
|
||||
We've been hard at work making an Auth experience that is as smooth as possible for Supabase developers. One of the challenges has been creating a simple experience for server-side rendering (SSR) environments. We [previously released](https://supabase.com/blog/community-day#server-side-auth-for-nextjs-and-nuxt-sveltekit-and-remix-coming-soon) our Auth Helpers libraries with support for React and NextJS, and today we’re announcing some exciting updates.
|
||||
We've been hard at work making an Auth experience that is as smooth as possible for Supabase developers. One of the challenges has been creating a simple experience for server-side rendering (SSR) environments. We [previously released](https://supabase.com/blog/community-day#server-side-auth-for-nextjs-and-nuxt-sveltekit-and-remix-coming-soon) our Auth Helpers libraries with support for React and Next.js, and today we’re announcing some exciting updates.
|
||||
|
||||
## What are Auth Helpers?
|
||||
|
||||
|
||||
@@ -186,7 +186,7 @@ Check out Jon's brand new, entirely free course on egghead to learn all about th
|
||||
|
||||
### Base Jump
|
||||
|
||||
[usebasejump.com](https://usebasejump.com/) is "The fastest way to launch Supabase apps with NextJS". Basejump is open source. Contributions are both awesome and encouraged!
|
||||
[usebasejump.com](https://usebasejump.com/) is "The fastest way to launch Supabase apps with Next.js". Basejump is open source. Contributions are both awesome and encouraged!
|
||||
|
||||
### supastarter
|
||||
|
||||
|
||||
@@ -128,7 +128,7 @@ Discover 100+ other apps in this [tweet](https://twitter.com/supabase/status/162
|
||||
|
||||
- Build a Fullstack serverless application using React, Chakra UI, Hookstate, and Supabase. [Tutorial](https://clx.hashnode.dev/build-a-fullstack-serverless-application-using-react-chakra-ui-hookstate-and-supabase)<br/>
|
||||
|
||||
- Implement Sign in with Google using Supabase Auth in NextJS. [Tutorial](https://dev.to/irwanphan/implement-sign-in-with-google-using-supabase-auth-in-nextjs-1jj1)<br/>
|
||||
- Implement Sign in with Google using Supabase Auth in Next.js. [Tutorial](https://dev.to/irwanphan/implement-sign-in-with-google-using-supabase-auth-in-nextjs-1jj1)<br/>
|
||||
|
||||
## We're Hiring
|
||||
|
||||
|
||||
@@ -154,7 +154,7 @@ For client-side auth, that's all you need to do to switch over. `supabase-js` wi
|
||||
|
||||
### Migrating to PKCE on the server
|
||||
|
||||
Server-side authentication is now a lot easier. Let's look at an example using NextJS.
|
||||
Server-side authentication is now a lot easier. Let's look at an example using Next.js.
|
||||
|
||||
Install the `next` version of auth-helpers (lets use the `nextjs` version for this example)
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ Discover the stories of two innovative developers who used Supabase to build AI
|
||||
- Sign in with Apple on Expo React Native. [Video](https://www.youtube.com/watch?v=-tpcZzTdvN0)
|
||||
- Infra & remote working AMA with the Fly team. [Twitter Space](https://twitter.com/supabase/status/1704023293295243600)
|
||||
- Supaweek: build a production-ready API backed by Supabase, OpenAI, and Zuplo. [Day 1](https://zuplo.com/blog/2023/09/25/using-openai-and-supabase-db-to-create-an-api) | [Day 2](https://zuplo.com/blog/2023/09/26/handling-user-requests-dynamically) | [Day 3](https://zuplo.com/blog/2023/09/27/documentation-for-your-supabase-api) | [Day 4](https://zuplo.com/blog/2023/09/28/monetizing-apis) | [Day 5](https://zuplo.com/blog/2023/09/29/announcing-supabase-auth-for-dev-portal)
|
||||
- Building a real-time WhatsApp Web Clone with NextJS, Supabase, and Stream. [Full series](https://getstream.io/blog/whatsapp-nextjs/)
|
||||
- Building a real-time WhatsApp Web Clone with Next.js, Supabase, and Stream. [Full series](https://getstream.io/blog/whatsapp-nextjs/)
|
||||
- Full Stack Calendly Clone using SwiftUI & Supabase. [Video](https://www.youtube.com/watch?v=SKkh2ZFTgdY)
|
||||
- Using Supabase’s vector database with PostgreSQL. [Article](https://blog.logrocket.com/using-supabases-vector-database-postgresql/)
|
||||
- Build A Complex Supabase App w/NoCode. [Video](https://www.youtube.com/watch?v=1n4UGyNDAis)
|
||||
|
||||
@@ -106,8 +106,8 @@
|
||||
{
|
||||
"type": "example",
|
||||
"products": ["database"],
|
||||
"title": "NextJS todo list app",
|
||||
"description": "NextJS todo list example",
|
||||
"title": "Next.js todo list app",
|
||||
"description": "Next.js todo list example",
|
||||
"author": "supabase",
|
||||
"author_url": "https://github.com/supabase",
|
||||
"author_img": "https://avatars.githubusercontent.com/u/54469796",
|
||||
|
||||
@@ -45,7 +45,7 @@ ENTRYPOINT ["docker-entrypoint.sh"]
|
||||
EXPOSE 8082
|
||||
CMD ["npm", "run", "dev:studio"]
|
||||
|
||||
# Compile NextJS
|
||||
# Compile Next.js
|
||||
FROM dev as builder
|
||||
|
||||
RUN npx turbo run build --scope=studio --include-dependencies --no-deps
|
||||
|
||||
@@ -52,13 +52,13 @@ export const EXAMPLE_PROJECTS = [
|
||||
url: 'https://github.com/joshnuss/supabase-kanban',
|
||||
},
|
||||
{
|
||||
framework: 'NextJS',
|
||||
framework: 'Next.js',
|
||||
title: 'Next.js Realtime chat app',
|
||||
description: 'Next.js Slack clone app using Supabase realtime subscriptions',
|
||||
url: 'https://github.com/supabase/supabase/tree/master/examples/slack-clone/nextjs-slack-clone',
|
||||
},
|
||||
{
|
||||
framework: 'NextJS',
|
||||
framework: 'Next.js',
|
||||
title: 'Next.js Subscription and Auth',
|
||||
description: 'The all-in-one starter kit for high-performance SaaS applications.',
|
||||
url: 'https://github.com/vercel/nextjs-subscription-payments',
|
||||
@@ -94,9 +94,9 @@ export const EXAMPLE_PROJECTS = [
|
||||
url: 'https://github.com/supabase/examples/tree/main/supabase-js-v1/todo-list/expo-todo-list',
|
||||
},
|
||||
{
|
||||
framework: 'NextJS',
|
||||
framework: 'Next.js',
|
||||
title: 'Next.js todo list app',
|
||||
description: 'NextJS todo list example',
|
||||
description: 'Next.js todo list example',
|
||||
url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/nextjs-todo-list',
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user