Next.js 15 Fullstack (App Router + Server Actions) · レッスン

プロジェクトのセットアップとCLI

新しいNext.js 15プロジェクトを初期化し、コマンドラインインターフェースを使って基本的なプロジェクト構成を確認する方法を学びます

「プロジェクトのセットアップとCLI」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Next.js 15: Your First Step

Welcome to Next.js 15 — the React framework for fast, scalable, production-ready apps. First up: spinning up a project and reading its structure from the CLI.

What You'll Need

Before you start, you need Node.js 18.17 or later — it provides the JavaScript runtime, and its package manager (npm, Yarn, or pnpm) installs your dependencies.

Initializing Your Project

Spin up a new project with create-next-app — it scaffolds everything for you. Just run this in your terminal.

npx create-next-app@latest

Setup Prompts Explained

The CLI asks a few questions. The one that matters: say Yes to App Router — it's essential for Next.js 15. ESLint and Tailwind are nice; TypeScript is optional.

Navigating Your New Project

When it finishes you get a new project folder. Step into it with cd and you're ready to work.

cd my-next-app

Your Project Structure

Know the key generated files: app/ holds your pages and layouts, public/ static assets, package.json your deps and scripts, next.config.js the config.

The Core `app` Directory

The app/ directory drives the App Router: layout.js for shared UI, page.js for a route's unique view, and globals.css for global styles.

Project Scripts & `npm run dev`

Your scripts live in package.json. The one you'll use constantly is npm run dev — it starts the development server.

npm run dev

Hello Next.js!

With the dev server running, open localhost:3000 to see your app. That page is rendered by app/page.js — here's a stripped-down version.

export default function Home() {
  return (
    <main>
      <h1>Hello CoddyKit!</h1>
    </main>
  );
}

Quick Check: Setup Basics

You've learned how to kickstart a Next.js project. Let's test your knowledge!

Recap: Your First Next.js Steps

Recap: you set up Next.js 15 with create-next-app, explored the app/ directory, and launched the dev server. Next: file-system routing.

よくある質問

「プロジェクトのセットアップとCLI」レッスンは無料ですか？

はい。「プロジェクトのセットアップとCLI」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

「プロジェクトのセットアップとCLI」で何を学びますか？

新しいNext.js 15プロジェクトを初期化し、コマンドラインインターフェースを使って基本的なプロジェクト構成を確認する方法を学びますブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「プロジェクトのセットアップとCLI」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack (App Router + Server Actions)に戻る