The goal of this experience is to practice our “standard practice” for working with Nextjs:
Now, try it yourself:
Create a GitHub repo called “nextjs-hello-world”.
Clone it to your local file space.
cd into your local nextjs-hello-world directory.
Use npx create-next-app@latest nextjs-hello-world to create an app called nextjs-hello-world inside your repo. Use the following options when prompted:
$ npx create-next-app@latest nextjs-hello-world
Need to install the following packages:
create-next-app@14.2.12
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
Creating a new Next.js app in /Users/carletonmoore/GitHub/ICS314/nextjs-hello-world/nextjs-hello-world.
Using npm.
Initializing project with template: app
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
added 318 packages, and audited 319 packages in 20s
129 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Success! Created nextjs-hello-world at /Users/carletonmoore/GitHub/ICS314/nextjs-hello-world/nextjs-hello-world
$
Change the name of the nextjs-hello-world subdirectory to app.
cd into the app/ directory, run npm run dev to run the app. Go to https://localhost:3000 to see the app.
Open the nextjs-hello-world folder in VSCode.
Edit app/src/app/page.tsx and check to see that Nextjs restarts and refreshes the page automatically.
Commit your project to GitHub.
Check to see that your project is saved on GitHub.
By the time and date indicated on the Schedule page, submit this assignment via Laulima.
Your submission should contain a link to the GitHub repository you created. Make sure you include the complete URL so that I can click on it in my mailer. Note: the final commit to this repo must have been made before the submission time and date, otherwise you will not receive credit for this assignment.
You must now grant read access to this repo to the TA for your section. To do this: