class-41.md

Dynamic Routes vs. Static Routes in Next.js

Dynamic routes in Next.js allow for creating pages with variable parts in the URL. This is useful for generating content-driven pages like blog posts. Dynamic routes are defined using files with brackets (e.g., [slug].js) in the pages directory. The dynamic parameter can be accessed using the useRouter hook. Pages can be generated at build time or on request.

Static routes, on the other hand, have fixed URLs and separate files (e.g., about.js) in the pages directory. They are generated at build time and remain unchanged until the next build.

Deploying a Next.js Application

To deploy a Next.js application, follow these steps:

1. Build the Application: Run npm run build to create an optimized production build.

2. Choose a Deployment Platform: Select a platform like Vercel, Netlify, or AWS Amplify.

3. Connect Repository: Connect the deployment platform to your Git repository.

4. Configure Build Settings: Set up build commands, environment variables, and other settings.

5. Deploy: Trigger deployment either manually or automatically on each commit.

Common deployment platforms include Vercel, Netlify, and AWS Amplify.

Static File Serving in Next.js

Next.js handles static file serving through the public directory. Static assets like images or stylesheets are placed in this folder. They are served directly by the server and don't go through the Next.js routing.

To reference static assets:

• Images: Place them in public/images and use /images/image-name.jpg in your components.
• Stylesheets: Put them in public/styles and use /styles/style.css in your components.

Using the / prefix ensures that the assets are served from the root of your application.