React (Next.js)
Getting Started
Install
sudo apt install nodejs sudo apt install npm
node -v ## v18.19.0
npm -v ## 9.2.0
Sample with Next.js
npx create-next-app@latest
What is your project named? ... my-app Would you like to use TypeScript? ... No / Yes Would you like to use ESLint? ... No / Yes Would you like to use Tailwind CSS? ... No / Yes Would you like to use `src/` directory? ... No / Yes Would you like to use App Router? (recommended) ... No / Yes Would you like to customize the default import alias (@/*)? ... No / Yes Creating a new Next.js app in /home/user/my-app. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next added 357 packages, and audited 358 packages in 15s 133 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Success! Created my-app at /home/user/my-app
cd my-app
## Development Server PORT=3000 npm run dev
## Production Server #npm run build #PORT=3000 npm run start
Troubleshooting - Missing .next Directory
https://stackoverflow.com/questions/50947389/nextjs-cannot-find-a-valid-build-in-the-next-directory
## Error: Could not find a production build in the '.next' directory. ## Try building your app with 'next build' before starting the production server. ## https://nextjs.org/docs/messages/production-start-no-build-id
npm run build
Troubleshooting - Using Well-Known Port
## Error: listen EACCES: permission denied 0.0.0.0:80
sudo PORT=80 npm start
Troubleshooting - Missing shadcn Component
https://ui.shadcn.com/docs/installation/next
https://nextjs.org/docs/messages/module-not-found
## Module not found: Can't resolve '@/components/ui/button' ## > 1 | import { Button } from "@/components/ui/button"
npx shadcn@latest init
Preflight checks. Verifying framework. Found Next.js. Validating Tailwind CSS. Validating import alias. Which style would you like to use? > New York Which color would you like to use as the base color? > Neutral Would you like to use CSS variables for theming? ... no / yes Writing components.json. Checking registry. Updating tailwind.config.ts Updating app/globals.css Installing dependencies. Created 1 file: - lib/utils.ts Success! Project initialization completed. You may now add components.
npx shadcn@latest add button
Troubleshooting - Missing NPM(recharts) Module
https://www.npmjs.com/package/recharts
## Module not found: Can't resolve 'recharts' ## > 4 | import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
npm install recharts
References
Acknowledgments
Daiphys is a professional-service company for research and development of leading-edge technologies in science and engineering.
Get started accelerating your business through our deep expertise in R&D with AI, quantum computing, and space development; please get in touch with Daiphys today!
Daiphys Technologies LLC - https://www.daiphys.com/