21 Exercise: Creating a simple Next.js app with custom webpack configuration

21.1 Aim of the task

Create a simple Next.js app that uses a custom webpack configuration. The app should have a start page with a welcome message text and an image. Configure Webpack to optimize images.

21.2 Steps to perform the task

1 Initialize a new Next.js project: Use npx create-next-app my-next-project in the terminal to create a new Next.js project.

2 Create a start page: Edit the pages/index.js file to display a welcome message and image.

3 Add an image to the public folder: Place an image of your choice in the public folder.

4 Customize the webpack configuration: Create a next.config.js file in the root directory of the project and add a custom webpack configuration to enable image optimization.

5 Run the application: Use npm run dev to start and test the application.