Add basic layout
This commit is contained in:
12
pages/_app.tsx
Normal file
12
pages/_app.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import type { AppProps } from "next/app";
|
||||
import { DefaultLayout } from "../components/layout/defaultLayout";
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<Component {...pageProps} />
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@@ -1,16 +0,0 @@
|
||||
import Link from 'next/link'
|
||||
import Layout from '../components/Layout'
|
||||
|
||||
const AboutPage = () => (
|
||||
<Layout title="About | Next.js + TypeScript Example">
|
||||
<h1>About</h1>
|
||||
<p>This is the about page</p>
|
||||
<p>
|
||||
<Link href="/">
|
||||
<a>Go home</a>
|
||||
</Link>
|
||||
</p>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export default AboutPage
|
||||
@@ -1,16 +0,0 @@
|
||||
import { NextApiRequest, NextApiResponse } from 'next'
|
||||
import { sampleUserData } from '../../../utils/sample-data'
|
||||
|
||||
const handler = (_req: NextApiRequest, res: NextApiResponse) => {
|
||||
try {
|
||||
if (!Array.isArray(sampleUserData)) {
|
||||
throw new Error('Cannot find user data')
|
||||
}
|
||||
|
||||
res.status(200).json(sampleUserData)
|
||||
} catch (err) {
|
||||
res.status(500).json({ statusCode: 500, message: err.message })
|
||||
}
|
||||
}
|
||||
|
||||
export default handler
|
||||
3
pages/group/member/index.tsx
Normal file
3
pages/group/member/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
const MemberPage = () => <div>Member</div>;
|
||||
|
||||
export default MemberPage;
|
||||
@@ -1,15 +1,5 @@
|
||||
import Link from 'next/link'
|
||||
import Layout from '../components/Layout'
|
||||
|
||||
const IndexPage = () => (
|
||||
<Layout title="Home | Next.js + TypeScript Example">
|
||||
<h1>Hello Next.js 👋</h1>
|
||||
<p>
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</p>
|
||||
</Layout>
|
||||
<div>Home</div>
|
||||
)
|
||||
|
||||
export default IndexPage
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import { GetStaticProps, GetStaticPaths } from 'next'
|
||||
|
||||
import { User } from '../../interfaces'
|
||||
import { sampleUserData } from '../../utils/sample-data'
|
||||
import Layout from '../../components/Layout'
|
||||
import ListDetail from '../../components/ListDetail'
|
||||
|
||||
type Props = {
|
||||
item?: User
|
||||
errors?: string
|
||||
}
|
||||
|
||||
const StaticPropsDetail = ({ item, errors }: Props) => {
|
||||
if (errors) {
|
||||
return (
|
||||
<Layout title="Error | Next.js + TypeScript Example">
|
||||
<p>
|
||||
<span style={{ color: 'red' }}>Error:</span> {errors}
|
||||
</p>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`${
|
||||
item ? item.name : 'User Detail'
|
||||
} | Next.js + TypeScript Example`}
|
||||
>
|
||||
{item && <ListDetail item={item} />}
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default StaticPropsDetail
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
// Get the paths we want to pre-render based on users
|
||||
const paths = sampleUserData.map((user) => ({
|
||||
params: { id: user.id.toString() },
|
||||
}))
|
||||
|
||||
// We'll pre-render only these paths at build time.
|
||||
// { fallback: false } means other routes should 404.
|
||||
return { paths, fallback: false }
|
||||
}
|
||||
|
||||
// This function gets called at build time on server-side.
|
||||
// It won't be called on client-side, so you can even do
|
||||
// direct database queries.
|
||||
export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
try {
|
||||
const id = params?.id
|
||||
const item = sampleUserData.find((data) => data.id === Number(id))
|
||||
// By returning { props: item }, the StaticPropsDetail component
|
||||
// will receive `item` as a prop at build time
|
||||
return { props: { item } }
|
||||
} catch (err) {
|
||||
return { props: { errors: err.message } }
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import { GetStaticProps } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { User } from '../../interfaces'
|
||||
import { sampleUserData } from '../../utils/sample-data'
|
||||
import Layout from '../../components/Layout'
|
||||
import List from '../../components/List'
|
||||
|
||||
type Props = {
|
||||
items: User[]
|
||||
}
|
||||
|
||||
const WithStaticProps = ({ items }: Props) => (
|
||||
<Layout title="Users List | Next.js + TypeScript Example">
|
||||
<h1>Users List</h1>
|
||||
<p>
|
||||
Example fetching data from inside <code>getStaticProps()</code>.
|
||||
</p>
|
||||
<p>You are currently on: /users</p>
|
||||
<List items={items} />
|
||||
<p>
|
||||
<Link href="/">
|
||||
<a>Go home</a>
|
||||
</Link>
|
||||
</p>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export const getStaticProps: GetStaticProps = async () => {
|
||||
// Example for including static props in a Next.js function component page.
|
||||
// Don't forget to include the respective types for any props passed into
|
||||
// the component.
|
||||
const items: User[] = sampleUserData
|
||||
return { props: { items } }
|
||||
}
|
||||
|
||||
export default WithStaticProps
|
||||
Reference in New Issue
Block a user