diff --git a/api-routes-starter/components/Layout.js b/api-routes-starter/components/Layout.js index 6dea4aa..cff0cca 100644 --- a/api-routes-starter/components/Layout.js +++ b/api-routes-starter/components/Layout.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import styles from './Layout.module.css' +import styles from './layout.module.css' import utilStyles from '../styles/utils.module.css' import Link from 'next/link' diff --git a/api-routes-starter/components/date.js b/api-routes-starter/components/date.js new file mode 100644 index 0000000..0ec71d3 --- /dev/null +++ b/api-routes-starter/components/date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/api-routes-starter/components/layout.js b/api-routes-starter/components/layout.js new file mode 100644 index 0000000..cff0cca --- /dev/null +++ b/api-routes-starter/components/layout.js @@ -0,0 +1,64 @@ +import Head from 'next/head' +import styles from './layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = '[Your Name]' +export const siteTitle = 'Next.js Sample Website' + +export default function Layout({ children, home }) { + return ( +
+ + + + + +
+ {home ? ( + <> + {name} +

{name}

+ + ) : ( + <> + + + {name} + + +

+ + {name} + +

+ + )} +
+
{children}
+ {!home && ( +
+ + ← Back to home + +
+ )} +
+ ) +} diff --git a/api-routes-starter/components/layout.module.css b/api-routes-starter/components/layout.module.css new file mode 100644 index 0000000..d0e3a8f --- /dev/null +++ b/api-routes-starter/components/layout.module.css @@ -0,0 +1,25 @@ +.container { + max-width: 36rem; + padding: 0 1rem; + margin: 3rem auto 6rem; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; +} + +.headerImage { + width: 6rem; + height: 6rem; +} + +.headerHomeImage { + width: 8rem; + height: 8rem; +} + +.backToHome { + margin: 3rem 0 0; +} diff --git a/api-routes-starter/pages/index.js b/api-routes-starter/pages/index.js index e2b76c5..0f9494b 100644 --- a/api-routes-starter/pages/index.js +++ b/api-routes-starter/pages/index.js @@ -1,9 +1,9 @@ import Head from 'next/head' -import Layout, { siteTitle } from '../components/Layout' +import Layout, { siteTitle } from '../components/layout' import utilStyles from '../styles/utils.module.css' import { getSortedPostsData } from '../lib/posts' import Link from 'next/link' -import Date from '../components/Date' +import Date from '../components/date' export default function Home({ allPostsData }) { return ( diff --git a/api-routes-starter/pages/posts/[id].js b/api-routes-starter/pages/posts/[id].js index b45c6b4..28faaad 100644 --- a/api-routes-starter/pages/posts/[id].js +++ b/api-routes-starter/pages/posts/[id].js @@ -1,7 +1,7 @@ -import Layout from '../../components/Layout' +import Layout from '../../components/layout' import { getAllPostIds, getPostData } from '../../lib/posts' import Head from 'next/head' -import Date from '../../components/Date' +import Date from '../../components/date' import utilStyles from '../../styles/utils.module.css' export default function Post({ postData }) { diff --git a/basics-final/components/Layout.js b/basics-final/components/Layout.js index 6cb833b..1cf9c69 100644 --- a/basics-final/components/Layout.js +++ b/basics-final/components/Layout.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import styles from './Layout.module.css' +import styles from './layout.module.css' import utilStyles from '../styles/utils.module.css' import Link from 'next/link' diff --git a/basics-final/components/date.js b/basics-final/components/date.js new file mode 100644 index 0000000..0ec71d3 --- /dev/null +++ b/basics-final/components/date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/basics-final/components/layout.js b/basics-final/components/layout.js new file mode 100644 index 0000000..1cf9c69 --- /dev/null +++ b/basics-final/components/layout.js @@ -0,0 +1,64 @@ +import Head from 'next/head' +import styles from './layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = 'Shu Uesugi' +export const siteTitle = 'Next.js Sample Website' + +export default function Layout({ children, home }) { + return ( +
+ + + + + +
+ {home ? ( + <> + {name} +

{name}

+ + ) : ( + <> + + + {name} + + +

+ + {name} + +

+ + )} +
+
{children}
+ {!home && ( +
+ + ← Back to home + +
+ )} +
+ ) +} diff --git a/basics-final/components/layout.module.css b/basics-final/components/layout.module.css new file mode 100644 index 0000000..d0e3a8f --- /dev/null +++ b/basics-final/components/layout.module.css @@ -0,0 +1,25 @@ +.container { + max-width: 36rem; + padding: 0 1rem; + margin: 3rem auto 6rem; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; +} + +.headerImage { + width: 6rem; + height: 6rem; +} + +.headerHomeImage { + width: 8rem; + height: 8rem; +} + +.backToHome { + margin: 3rem 0 0; +} diff --git a/basics-final/pages/index.js b/basics-final/pages/index.js index c4abb5a..1f4acc0 100644 --- a/basics-final/pages/index.js +++ b/basics-final/pages/index.js @@ -1,9 +1,9 @@ import Head from 'next/head' -import Layout, { siteTitle } from '../components/Layout' +import Layout, { siteTitle } from '../components/layout' import utilStyles from '../styles/utils.module.css' import { getSortedPostsData } from '../lib/posts' import Link from 'next/link' -import Date from '../components/Date' +import Date from '../components/date' export default function Home({ allPostsData }) { return ( diff --git a/basics-final/pages/posts/[id].js b/basics-final/pages/posts/[id].js index b45c6b4..28faaad 100644 --- a/basics-final/pages/posts/[id].js +++ b/basics-final/pages/posts/[id].js @@ -1,7 +1,7 @@ -import Layout from '../../components/Layout' +import Layout from '../../components/layout' import { getAllPostIds, getPostData } from '../../lib/posts' import Head from 'next/head' -import Date from '../../components/Date' +import Date from '../../components/date' import utilStyles from '../../styles/utils.module.css' export default function Post({ postData }) { diff --git a/data-fetching-starter/components/Layout.js b/data-fetching-starter/components/Layout.js index 6dea4aa..cff0cca 100644 --- a/data-fetching-starter/components/Layout.js +++ b/data-fetching-starter/components/Layout.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import styles from './Layout.module.css' +import styles from './layout.module.css' import utilStyles from '../styles/utils.module.css' import Link from 'next/link' diff --git a/data-fetching-starter/components/layout.js b/data-fetching-starter/components/layout.js new file mode 100644 index 0000000..cff0cca --- /dev/null +++ b/data-fetching-starter/components/layout.js @@ -0,0 +1,64 @@ +import Head from 'next/head' +import styles from './layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = '[Your Name]' +export const siteTitle = 'Next.js Sample Website' + +export default function Layout({ children, home }) { + return ( +
+ + + + + +
+ {home ? ( + <> + {name} +

{name}

+ + ) : ( + <> + + + {name} + + +

+ + {name} + +

+ + )} +
+
{children}
+ {!home && ( +
+ + ← Back to home + +
+ )} +
+ ) +} diff --git a/data-fetching-starter/components/layout.module.css b/data-fetching-starter/components/layout.module.css new file mode 100644 index 0000000..d0e3a8f --- /dev/null +++ b/data-fetching-starter/components/layout.module.css @@ -0,0 +1,25 @@ +.container { + max-width: 36rem; + padding: 0 1rem; + margin: 3rem auto 6rem; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; +} + +.headerImage { + width: 6rem; + height: 6rem; +} + +.headerHomeImage { + width: 8rem; + height: 8rem; +} + +.backToHome { + margin: 3rem 0 0; +} diff --git a/data-fetching-starter/pages/index.js b/data-fetching-starter/pages/index.js index dad8d3d..be1afc7 100644 --- a/data-fetching-starter/pages/index.js +++ b/data-fetching-starter/pages/index.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import Layout, { siteTitle } from '../components/Layout' +import Layout, { siteTitle } from '../components/layout' import utilStyles from '../styles/utils.module.css' export default function Home() { diff --git a/data-fetching-starter/pages/posts/first-post.js b/data-fetching-starter/pages/posts/first-post.js index d9f319e..887057f 100644 --- a/data-fetching-starter/pages/posts/first-post.js +++ b/data-fetching-starter/pages/posts/first-post.js @@ -1,6 +1,6 @@ import Head from 'next/head' import Link from 'next/link' -import Layout from '../../components/Layout' +import Layout from '../../components/layout' export default function FirstPost() { return ( diff --git a/dynamic-routes-starter/components/Layout.js b/dynamic-routes-starter/components/Layout.js index 6dea4aa..cff0cca 100644 --- a/dynamic-routes-starter/components/Layout.js +++ b/dynamic-routes-starter/components/Layout.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import styles from './Layout.module.css' +import styles from './layout.module.css' import utilStyles from '../styles/utils.module.css' import Link from 'next/link' diff --git a/dynamic-routes-starter/components/layout.js b/dynamic-routes-starter/components/layout.js new file mode 100644 index 0000000..cff0cca --- /dev/null +++ b/dynamic-routes-starter/components/layout.js @@ -0,0 +1,64 @@ +import Head from 'next/head' +import styles from './layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = '[Your Name]' +export const siteTitle = 'Next.js Sample Website' + +export default function Layout({ children, home }) { + return ( +
+ + + + + +
+ {home ? ( + <> + {name} +

{name}

+ + ) : ( + <> + + + {name} + + +

+ + {name} + +

+ + )} +
+
{children}
+ {!home && ( +
+ + ← Back to home + +
+ )} +
+ ) +} diff --git a/dynamic-routes-starter/components/layout.module.css b/dynamic-routes-starter/components/layout.module.css new file mode 100644 index 0000000..d0e3a8f --- /dev/null +++ b/dynamic-routes-starter/components/layout.module.css @@ -0,0 +1,25 @@ +.container { + max-width: 36rem; + padding: 0 1rem; + margin: 3rem auto 6rem; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; +} + +.headerImage { + width: 6rem; + height: 6rem; +} + +.headerHomeImage { + width: 8rem; + height: 8rem; +} + +.backToHome { + margin: 3rem 0 0; +} diff --git a/dynamic-routes-starter/pages/index.js b/dynamic-routes-starter/pages/index.js index 1065af2..24ba2c6 100644 --- a/dynamic-routes-starter/pages/index.js +++ b/dynamic-routes-starter/pages/index.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import Layout, { siteTitle } from '../components/Layout' +import Layout, { siteTitle } from '../components/layout' import utilStyles from '../styles/utils.module.css' import { getSortedPostsData } from '../lib/posts' diff --git a/dynamic-routes-starter/pages/posts/first-post.js b/dynamic-routes-starter/pages/posts/first-post.js index d9f319e..887057f 100644 --- a/dynamic-routes-starter/pages/posts/first-post.js +++ b/dynamic-routes-starter/pages/posts/first-post.js @@ -1,6 +1,6 @@ import Head from 'next/head' import Link from 'next/link' -import Layout from '../../components/Layout' +import Layout from '../../components/layout' export default function FirstPost() { return ( diff --git a/typescript-final/components/Layout.tsx b/typescript-final/components/Layout.tsx index 22f7b79..428a0d3 100644 --- a/typescript-final/components/Layout.tsx +++ b/typescript-final/components/Layout.tsx @@ -1,5 +1,5 @@ import Head from 'next/head' -import styles from './Layout.module.css' +import styles from './layout.module.css' import utilStyles from '../styles/utils.module.css' import Link from 'next/link' diff --git a/typescript-final/components/date.tsx b/typescript-final/components/date.tsx new file mode 100644 index 0000000..70662ea --- /dev/null +++ b/typescript-final/components/date.tsx @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }: { dateString: string }) { + const date = parseISO(dateString) + return +} diff --git a/typescript-final/components/layout.module.css b/typescript-final/components/layout.module.css new file mode 100644 index 0000000..d0e3a8f --- /dev/null +++ b/typescript-final/components/layout.module.css @@ -0,0 +1,25 @@ +.container { + max-width: 36rem; + padding: 0 1rem; + margin: 3rem auto 6rem; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; +} + +.headerImage { + width: 6rem; + height: 6rem; +} + +.headerHomeImage { + width: 8rem; + height: 8rem; +} + +.backToHome { + margin: 3rem 0 0; +} diff --git a/typescript-final/components/layout.tsx b/typescript-final/components/layout.tsx new file mode 100644 index 0000000..428a0d3 --- /dev/null +++ b/typescript-final/components/layout.tsx @@ -0,0 +1,70 @@ +import Head from 'next/head' +import styles from './layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = '[Your Name]' +export const siteTitle = 'Next.js Sample Website' + +export default function Layout({ + children, + home +}: { + children: React.ReactNode + home?: boolean +}) { + return ( +
+ + + + + +
+ {home ? ( + <> + {name} +

{name}

+ + ) : ( + <> + + + {name} + + +

+ + {name} + +

+ + )} +
+
{children}
+ {!home && ( +
+ + ← Back to home + +
+ )} +
+ ) +} diff --git a/typescript-final/pages/index.tsx b/typescript-final/pages/index.tsx index 3cf86b2..39d4bd1 100644 --- a/typescript-final/pages/index.tsx +++ b/typescript-final/pages/index.tsx @@ -1,9 +1,9 @@ import Head from 'next/head' -import Layout, { siteTitle } from '../components/Layout' +import Layout, { siteTitle } from '../components/layout' import utilStyles from '../styles/utils.module.css' import { getSortedPostsData } from '../lib/posts' import Link from 'next/link' -import Date from '../components/Date' +import Date from '../components/date' import { GetStaticProps } from 'next' export default function Home({ diff --git a/typescript-final/pages/posts/[id].tsx b/typescript-final/pages/posts/[id].tsx index 86e551f..ffe4bdd 100644 --- a/typescript-final/pages/posts/[id].tsx +++ b/typescript-final/pages/posts/[id].tsx @@ -1,7 +1,7 @@ -import Layout from '../../components/Layout' +import Layout from '../../components/layout' import { getAllPostIds, getPostData } from '../../lib/posts' import Head from 'next/head' -import Date from '../../components/Date' +import Date from '../../components/date' import utilStyles from '../../styles/utils.module.css' import { GetStaticProps, GetStaticPaths } from 'next' diff --git a/typescript-starter/components/Layout.js b/typescript-starter/components/Layout.js index 6dea4aa..cff0cca 100644 --- a/typescript-starter/components/Layout.js +++ b/typescript-starter/components/Layout.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import styles from './Layout.module.css' +import styles from './layout.module.css' import utilStyles from '../styles/utils.module.css' import Link from 'next/link' diff --git a/typescript-starter/components/date.js b/typescript-starter/components/date.js new file mode 100644 index 0000000..0ec71d3 --- /dev/null +++ b/typescript-starter/components/date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/typescript-starter/components/layout.js b/typescript-starter/components/layout.js new file mode 100644 index 0000000..cff0cca --- /dev/null +++ b/typescript-starter/components/layout.js @@ -0,0 +1,64 @@ +import Head from 'next/head' +import styles from './layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = '[Your Name]' +export const siteTitle = 'Next.js Sample Website' + +export default function Layout({ children, home }) { + return ( +
+ + + + + +
+ {home ? ( + <> + {name} +

{name}

+ + ) : ( + <> + + + {name} + + +

+ + {name} + +

+ + )} +
+
{children}
+ {!home && ( +
+ + ← Back to home + +
+ )} +
+ ) +} diff --git a/typescript-starter/components/layout.module.css b/typescript-starter/components/layout.module.css new file mode 100644 index 0000000..d0e3a8f --- /dev/null +++ b/typescript-starter/components/layout.module.css @@ -0,0 +1,25 @@ +.container { + max-width: 36rem; + padding: 0 1rem; + margin: 3rem auto 6rem; +} + +.header { + display: flex; + flex-direction: column; + align-items: center; +} + +.headerImage { + width: 6rem; + height: 6rem; +} + +.headerHomeImage { + width: 8rem; + height: 8rem; +} + +.backToHome { + margin: 3rem 0 0; +} diff --git a/typescript-starter/pages/index.js b/typescript-starter/pages/index.js index e2b76c5..0f9494b 100644 --- a/typescript-starter/pages/index.js +++ b/typescript-starter/pages/index.js @@ -1,9 +1,9 @@ import Head from 'next/head' -import Layout, { siteTitle } from '../components/Layout' +import Layout, { siteTitle } from '../components/layout' import utilStyles from '../styles/utils.module.css' import { getSortedPostsData } from '../lib/posts' import Link from 'next/link' -import Date from '../components/Date' +import Date from '../components/date' export default function Home({ allPostsData }) { return ( diff --git a/typescript-starter/pages/posts/[id].js b/typescript-starter/pages/posts/[id].js index b45c6b4..28faaad 100644 --- a/typescript-starter/pages/posts/[id].js +++ b/typescript-starter/pages/posts/[id].js @@ -1,7 +1,7 @@ -import Layout from '../../components/Layout' +import Layout from '../../components/layout' import { getAllPostIds, getPostData } from '../../lib/posts' import Head from 'next/head' -import Date from '../../components/Date' +import Date from '../../components/date' import utilStyles from '../../styles/utils.module.css' export default function Post({ postData }) {