mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
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 <[email protected]> Co-authored-by: Joseph <[email protected]>
39 lines
885 B
TypeScript
39 lines
885 B
TypeScript
import { useRouter } from "next/router";
|
|
import useSWR from "swr";
|
|
import Form from "@/components/Form";
|
|
|
|
const fetcher = (url: string) =>
|
|
fetch(url)
|
|
.then((res) => res.json())
|
|
.then((json) => json.data);
|
|
|
|
const EditPet = () => {
|
|
const router = useRouter();
|
|
const { id } = router.query;
|
|
const {
|
|
data: pet,
|
|
error,
|
|
isLoading,
|
|
} = useSWR(id ? `/api/pets/${id}` : null, fetcher);
|
|
|
|
if (error) return <p>Failed to load</p>;
|
|
if (isLoading) return <p>Loading...</p>;
|
|
if (!pet) return null;
|
|
|
|
const petForm = {
|
|
name: pet.name,
|
|
owner_name: pet.owner_name,
|
|
species: pet.species,
|
|
age: pet.age,
|
|
poddy_trained: pet.poddy_trained,
|
|
diet: pet.diet,
|
|
image_url: pet.image_url,
|
|
likes: pet.likes,
|
|
dislikes: pet.dislikes,
|
|
};
|
|
|
|
return <Form formId="edit-pet-form" petForm={petForm} forNewPet={false} />;
|
|
};
|
|
|
|
export default EditPet;
|