02 01 e

NOTICE

@@ -5,11 +5,28 @@ Licensed under the LinkedIn Learning Exercise File License (the "License").
 See LICENSE in the project root for license information.
 
 ATTRIBUTIONS:
-[PLEASE PROVIDE ATTRIBUTIONS OR DELETE THIS AND THE ABOVE LINE “ATTRIBUTIONS”]
+
+next.js
+https://github.com/vercel/next.js
+Copyright (c) 2022 Vercel, Inc.
+License: MIT
+https://opensource.org/licenses/MIT
 
 Please note, this project may automatically load third party code from external 
 repositories (for example, NPM modules, Composer packages, or other dependencies). 
 If so, such third party code may be subject to other license terms than as set 
 forth above. In addition, such third party code may also depend on and load 
 multiple tiers of dependencies. Please review the applicable licenses of the 
 additional dependencies.
+
+=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+The MIT License (MIT)
+
+Copyright (c) 2022 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,7 +1,13 @@
+
 # Learning Next.js
 This is the repository for the LinkedIn Learning course Learning Next.js. The full course is available from [LinkedIn Learning][lil-course-url].
 
-_See the readme file in the main branch for updated instructions and information._
+![Learning Next.js][lil-thumbnail-url] 
+
+The Next.js web development framework gives you all the benefits of a server-side rendering tool with the speed and ease of a single-page app. Using this popular, React-based tool, you can build, manage, and customize a complete web application from scratch in JavaScript.
+
+In this course, instructor Sandy Ludosky shows you how to get the best developer experience from your Next.js project—with zero configuration, zero user headaches, and lightning fast, dynamic page speeds. Explore the benefits of server-side rendering with web frameworks like Next.js. Sandy walks you through basic features such as pages, data fetching, and layout options; advanced topics like dynamic routes and API routes; and how to build and stylize a React project from start to finish so you can create a Next.js app on your own.
+
 ## Instructions
 This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access.
 
@@ -35,15 +41,14 @@ To resolve this issue:
 `npm run dev`
 
 
-[0]: # (Replace these placeholder URLs with actual course URLs)
-
-[lil-course-url]: https://www.linkedin.com/learning/
-[lil-thumbnail-url]: http://
-
 ### Instructor
 
 **Sandy Ludosky**
 
-_Web Developer and Trainer_
+_Web Developer and Trainer_                     
+
+
+Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/sandy-ludosky).
 
-Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/sandy-ludosky).
+[lil-course-url]: https://www.linkedin.com/learning/learning-next-js
+[lil-thumbnail-url]: https://cdn.lynda.com/course/2491193/2491193-1661366795372-16x9.jpg

course_files_final/02/my-next-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

course_files_final/02/my-next-app/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

course_files_final/02/my-next-app/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

course_files_final/02/my-next-app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

course_files_final/02/my-next-app/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "my-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "eslint": "8.18.0",
+    "eslint-config-next": "12.1.6"
+  }
+}

course_files_final/02/my-next-app/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

course_files_final/02/my-next-app/pages/about.js

@@ -0,0 +1,3 @@
+export default function About() {
+    return(<h1>About NextJS</h1>)
+}

course_files_final/02/my-next-app/pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

course_files_final/02/my-next-app/pages/api/topics.js

@@ -0,0 +1,18 @@
+export default [
+    {
+        id: 'angular', 
+        about: 'Angular is a development platform, built on TypeScript including a component-based framework for building scalable web applications, A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more and a suite of developer tools to help you develop, build, test, and update your code'
+    }, 
+    {
+        id: 'vue', 
+        about: 'Vue is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.'
+    }, 
+    {
+        id: 'react', 
+        about: 'React is an open-source front JavaScript library for building user interfaces.'
+    }, 
+    {
+        id: 'next', 
+        about: 'Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.'
+    }
+]

course_files_final/02/my-next-app/pages/hello.js

@@ -0,0 +1,8 @@
+export default function Hello() {
+    return(
+        <>
+            <h1>Learn NextJS</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel erat ut enim maximus feugiat vel nec nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non pharetra purus. Phasellus tempor scelerisque lorem, at convallis quam egestas vel. Vestibulum viverra, velit eget finibus tincidunt, mi mauris ultrices risus, consequat porta ligula sem sed erat. Aliquam varius tristique pellentesque. Proin laoreet ex justo, vel dictum metus ornare at. Suspendisse aliquam lorem ac mi posuere volutpat. Suspendisse commodo dui ut convallis interdum. Integer eleifend mauris in mi facilisis, id volutpat sem mattis. Curabitur malesuada rutrum ipsum suscipit lacinia.</p>
+        </>
+    )
+}

course_files_final/02/my-next-app/pages/index.js

@@ -0,0 +1,69 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import Link from "next/link"
+import styles from '../styles/Home.module.css'
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to my Elearning site
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing{' '}
+          <code className={styles.code}>pages/index.js</code>
+        </p>
+
+        <div className={styles.grid}>
+          <Link href="/learn/next">
+            <a className={styles.card}>
+              <h2>Learn NextJS &rarr;</h2>
+            </a>
+          </Link>
+
+          <Link href="/learn/react">
+            <a href="https://nextjs.org/learn" className={styles.card}>
+              <h2>Learn React &rarr;</h2>
+            </a>
+          </Link>
+
+          <Link href="/learn/angular">
+            <a className={styles.card}>
+              <h2>Learn Angular &rarr;</h2>
+            </a>
+          </Link>
+
+
+          <Link href="/learn/vue">
+            <a className={styles.card}>
+              <h2>Learn Vue &rarr;</h2>
+            </a>
+          </Link>
+
+
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  )
+}

course_files_final/02/my-next-app/pages/learn/[name].js

@@ -0,0 +1,9 @@
+import { useRouter } from "next/router"
+import topics from "../api/topics"
+
+export default function Learn() {
+    const  router = useRouter()
+    const { name } = router.query
+    const topic = topics.find(topic => topic.id === name)
+    return(<h1>Learn { topic.id}</h1>)
+}

course_files_final/02/my-next-app/pages/learn/nextjs.js

@@ -0,0 +1,3 @@
+export default function LearnNext() {
+    return(<h1>Learn NextJS</h1>)
+}

course_files_final/02/my-next-app/pages/learn/react.js

@@ -0,0 +1,3 @@
+export default function LearnReact() {
+    return(<h1>Learn ReactJS</h1>)
+}