Dharun R
d43e5f9378
## For Contributors ### Improving Documentation This PR improves the Next.js examples by converting relative imports to @ aliases, making them more readable and maintainable. ## Description Fixes #83717 by converting deep relative imports to clean @ aliases in Next.js examples. Currently, Next.js examples use long relative imports like: ```typescript import { i18n, type Locale } from "../../../i18n-config"; ``` This PR updates them to use clean @ aliases: ```typescript import { i18n, type Locale } from "@/i18n-config"; ``` ## Changes Made - **Added path alias configuration** `"@/*": ["./*"]` to tsconfig.json files - **Converted deep relative imports** (d:) to clean @ aliases (`@/`) - **Updated examples**: - `i18n-routing` (specifically mentioned in issue #83717) - 5 files - `with-typescript` - 2 files - `with-grafbase` - 2 files - `with-mongodb-mongoose` - 2 files ## Benefits - **Improved readability**: `@/config` vs `../../../config` - **Reduced errors**: No need to count `../` levels when refactoring - **Better maintainability**: Easier to move files around - **Modern standards**: Aligns with production Next.js practices - **Better IDE support**: Enhanced autocomplete and navigation ## Examples of Changes ### Before: ```typescript import { i18n, type Locale } from "../../../i18n-config"; import { getDictionary } from "../../get-dictionary"; import { grafbase } from "../../../lib/grafbase"; ``` ### After: ```typescript import { i18n, type Locale } from "@/i18n-config"; import { getDictionary } from "@/get-dictionary"; import { grafbase } from "@/lib/grafbase"; ``` ## Testing - TypeScript compilation works correctly - @ imports resolve properly in IDE - Runtime functionality preserved - No breaking changes to example functionality This change is purely a developer experience improvement and doesn't affect runtime behavior. --------- Co-authored-by: dharunr36 <dharunr.23aid@kongu.edu> Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Next.js with Grafbase
This example shows to use Grafbase with Next.js. This example features fetching from a local GraphQL backend powered by the Grafbase CLI, and GraphQL Code Generator for making type-safe queries.
Demo
You can see a demo of this online at https://nextjs-rsc-demo.grafbase-vercel.dev.
Deploy to Vercel
Make sure to provide your GRAFBASE_API_URL and GRAFBASE_API_KEY to Vercel as environment variables when deploying.
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-grafbase with-grafbase-app
yarn create next-app --example with-grafbase with-grafbase-app
pnpm create next-app --example with-grafbase with-grafbase-app
To run the example locally you need to:
-
Copy the
.env.local.exampleto.env.localand provide your API URL and API Key:cp .env.local.example .env.local— the defaults will be fine for development mode. -
Run the Grafbase CLI using
npx grafbase@latest dev -
Populate the backend with some
Postentries using a GraphQL mutation:
mutation {
postCreate(
input: {
title: "I love Next.js!"
slug: "i-love-nextjs"
comments: [{ create: { message: "me too!" } }]
}
) {
post {
id
slug
}
}
}
-
Run the app locally and go to http://localhost:3000 to navigate to each post page! This data is fetched from the local backend.
-
Optionally run
npm run codegento watch for any changes to queries inside of the app and automatically generate types.
Learn more
- Grafbase Quickstart — get started with Grafbase, quickly!
- Create an account — deploy to the edge with Grafbase!
- Next.js Documentation — learn more about Next.js