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]>
106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
|
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
import dbConnect from "@/lib/dbConnect";
|
|
import Pet, { Pets } from "@/models/Pet";
|
|
import { GetServerSideProps, GetServerSidePropsContext } from "next";
|
|
import { ParsedUrlQuery } from "querystring";
|
|
|
|
interface Params extends ParsedUrlQuery {
|
|
id: string;
|
|
}
|
|
|
|
type Props = {
|
|
pet: Pets;
|
|
};
|
|
|
|
/* Allows you to view pet card info and delete pet card*/
|
|
const PetPage = ({ pet }: Props) => {
|
|
const router = useRouter();
|
|
const [message, setMessage] = useState("");
|
|
const handleDelete = async () => {
|
|
const petID = router.query.id;
|
|
|
|
try {
|
|
await fetch(`/api/pets/${petID}`, {
|
|
method: "Delete",
|
|
});
|
|
router.push("/");
|
|
} catch (error) {
|
|
setMessage("Failed to delete the pet.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div key={pet._id}>
|
|
<div className="card">
|
|
<img src={pet.image_url} />
|
|
<h5 className="pet-name">{pet.name}</h5>
|
|
<div className="main-content">
|
|
<p className="pet-name">{pet.name}</p>
|
|
<p className="owner">Owner: {pet.owner_name}</p>
|
|
|
|
{/* Extra Pet Info: Likes and Dislikes */}
|
|
<div className="likes info">
|
|
<p className="label">Likes</p>
|
|
<ul>
|
|
{pet.likes.map((data, index) => (
|
|
<li key={index}>{data} </li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="dislikes info">
|
|
<p className="label">Dislikes</p>
|
|
<ul>
|
|
{pet.dislikes.map((data, index) => (
|
|
<li key={index}>{data} </li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="btn-container">
|
|
<Link href={`/${pet._id}/edit`}>
|
|
<button className="btn edit">Edit</button>
|
|
</Link>
|
|
<button className="btn delete" onClick={handleDelete}>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{message && <p>{message}</p>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
|
|
params,
|
|
}: GetServerSidePropsContext) => {
|
|
await dbConnect();
|
|
|
|
if (!params?.id) {
|
|
return {
|
|
notFound: true,
|
|
};
|
|
}
|
|
|
|
const pet = await Pet.findById(params.id).lean();
|
|
|
|
if (!pet) {
|
|
return {
|
|
notFound: true,
|
|
};
|
|
}
|
|
|
|
/* Ensures all objectIds and nested objectIds are serialized as JSON data */
|
|
const serializedPet = JSON.parse(JSON.stringify(pet));
|
|
|
|
return {
|
|
props: {
|
|
pet: serializedPet,
|
|
},
|
|
};
|
|
};
|
|
|
|
export default PetPage;
|